Menu
In the code below, the button should break the line and increase the its height. But the text is overlapping the lateral borders (the behavior is reproduced in Codepen link below).
How can it be fixed ?
Codepen
<v-btn block outline color="indigo" class="no-text-transform">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nec dapibus augue.
</v-btn>
519
You need to change min-width of . btn class and set padding-left: 16px of . btn-content . Save this answer.
Vuetify Tile Button You can create them with the tile prop: <template> <v-app> <v-row class="ma-4" justify="space-around"> <v-btn tile> Tile Button </v-btn> <v-btn tile color="yellow"> Tile Button </v-btn> <v-btn tile color="blue"> Tile Button</v-btn> </v-row> </v-app> </template> ...
To conditionally disable a button element in Vue. js, you can dynamically bind the disable attribute to an expression that evaluates to boolean true (to disable the button) or false (to enable the button). Please note that :disable is a shorthand syntax for writing v-bind:disable .
Without having used Vuetify before, I can only provide a rudimentary solution (that said, I did look through the docs and couldn't find anything)... It appears the .v-btn__content selector that is generated has a white-space: nowrap applied to it. So what you can do is add an element to contain your text overriding its parent's style:
<v-btn block outline color="indigo" class="no-text-transform">
<span style="white-space: normal;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nec dapibus augue.
</span>
</v-btn>
If that's still too small, you may have to adjust the v-btn height.
137
Try:
<v-btn
block
outline
>
<p class="text-wrap" style="width: min-content; margin: auto;">
Crear Contraseña</p>
</v-btn>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
