CODEWITHSUNDEEP
cssvue.jsvuetify.js
le0
le0

Reputation: 851

Vuetify - label of v-btn (button) overlaps the lateral borders

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>

Upvotes: 8

Views: 16300

Answers (4)

Adam Muse
Adam Muse

Reputation: 279

here it is without inline styles

   <v-btn
     block
     color="blue"
     large
     class="no-text-transform pa-10"
     @click="reviewing"
    >
      <p class="text-wrap ma-auto">
       long text here
      </p>
    </v-btn>

Upvotes: 0

Alexander Shkirkov
Alexander Shkirkov

Reputation: 3857

In a current Vuetify 2.6.0+ multiline button can be done in a slightly different way.

For some reason you can't override <span class="v-btn__content"> tag in default slot. Unfortunately, your custom content is wrapping in this tag and generated HTML will look like this:

Generated HTML code

But you can solve your issue this way:

<v-btn
  class="btn-multiline"
  width="150"
  height="50"
>
  <span class="text-wrap">Multiline Button Text</span>
</v-btn>

...

<style>
.btn-multiline > span {
  width: 100%
}
</style>

So you just need to define custom global .btn-multiline class, set full width to <span class="v-btn__content"> tag and apply internal Vuetify text-wrap class that unfolds to white-space: normal.

You can try this solution at CodePen.

Upvotes: 0

Caro P&#233;rez
Caro P&#233;rez

Reputation: 538

Try:

    <v-btn
      block
      outline
      >
    <p class="text-wrap" style="width: min-content; margin: auto;">
    Crear Contraseña</p>
    </v-btn>

Upvotes: 2

git-e-up
git-e-up

Reputation: 904

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.

Upvotes: 16

Related Questions