CODEWITHSUNDEEP
vue.jsvuetify.js
Ocaso Protal
Ocaso Protal

Reputation: 20267

Make buttons in v-card-actions responsive

I have a v-card with three buttons (v-btn) in v-card-actions and each button has a long text on it. That's mostly no problem, but when viewed on a small screen these buttons aren't responsive, they are still aligned from left to right instead top to bottom and therefor the rightmost button is cut:

screenshot with cropped button

HTML:

<div id="app">
  <v-app>
    <v-card>
      <v-card-title>
        Foo!
      </v-card-title>
      <v-card-text>
        Bar!
      </v-card-text>
      <v-card-actions>
        <v-btn>VeryLongText</v-btn>
        <v-btn>SpamSpamSpam</v-btn>
        <v-btn>Wrzlbrnft</v-btn>
      </v-card-actions>
    </v-card>
  </v-app>
</div>

JS:

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
  })
})

Codepen example

In my current situation I can circumvent this by using small, e.g. <v-btn small>Verylongtext</v-btn>, but I want to know how to make this fully responsive.

Vue version: 2.6.10 Vuetify: 2.1.14

Upvotes: 0

Views: 4021

Answers (1)

rohi
rohi

Reputation: 76

Whats about using a grid?

<div id="app">
  <v-app>
    <v-card>
      <v-card-title>
        Foo!
      </v-card-title>
      <v-card-text>
        Bar!
      </v-card-text>
      <v-card-actions>
        <v-container>
          <v-row dense>
            <v-col><v-btn class="button__full">VeryLongText</v-btn></v-col>
            <v-col><v-btn class="button__full">SpamSpamSpam</v-btn></v-col>
            <v-col><v-btn class="button__full">Wrzlbrnft</v-btn></v-col>
          </v-row>
        </v-container>
      </v-card-actions>
    </v-card>
  </v-app>
</div>

CodePen

Upvotes: 6

Related Questions