CODEWITHSUNDEEP
buttonsizevuetify.js
Physics09
Physics09

Reputation: 105

How to make 2 buttons with different text lenght having same width in vuetify?

Here, I am using vuetifyjs to create buttons and I have set my size of button large. I can see change in button size but all I could see is that all my buttons are of different size. I want to have all my buttons to be of same height and width which is same size for all buttons. Please can anyone help me with that.

Here is my code:

<template>

<div class="text-center">
    <v-btn 
       dark large
       min-width: 0;
      class="ma-2"

      color="red"
    >
      Red
    </v-btn>

        <v-btn
        dark large
      class="ma-2"

      color="pink"

    >
      Pink
    </v-btn>

        <v-btn
        dark large
      class="ma-2"

      color="purple"

    >
      Purple
    </v-btn>

       <v-btn
       dark large
      class="ma-2"

      color="light-blue"

    >
      Light-Blue
    </v-btn>

    <v-btn
    dark large
      class="ma-2"

      color="brown"

    >
      Brown
    </v-btn> <br/>

    <v-btn
    dark large
      class="ma-2"

      color="orange"

    >
      Orange
    </v-btn>

        <v-btn
        dark large
      class="ma-2"

      color="green"

    >
      Green
    </v-btn>

        <v-btn
        dark large
      class="ma-2"

      color="teal"

    >
      Teal
    </v-btn>

        <v-btn
        dark large
      class="ma-2"

      color="yellow"

    >
      Yellow
    </v-btn>


        <v-btn
        dark large
      class="ma-2"

      color="cyan"

    >
      Cyan
    </v-btn><br/>

        <v-btn
        dark large
      class="ma-2"

      color="amber"

    >
      Amber
    </v-btn>

        <v-btn
        dark large
      class="ma-2"

      color="lime"

    >
      Lime
    </v-btn>

        <v-btn
        dark large
      class="ma-2"

      color="grey"

    >
      Grey
    </v-btn>


        <v-btn
        dark large
      class="ma-2"

      color="blue-grey"

    >
      Blue-Grey
    </v-btn>


 <v-btn     
 dark large

class="ma-2 white--text"
  color="black"
  >

  Black
</v-btn>


</div>


</template>

Upvotes: 0

Views: 4553

Answers (2)

misterpenguin
misterpenguin

Reputation: 33

You should use the block prop:

<div id="app">
  <v-app id="inspire">
    <v-row>
      <v-col cols="6">
        <v-btn block color="red" dark>Short Button</v-btn>
      </v-col>
    </v-row>
    <v-row>
      <v-col cols="6">
        <v-btn block color="green" dark>A Very Long Button</v-btn>
      </v-col>
    </v-row>
  </v-app>
</div>

See: https://v2.vuetifyjs.com/en/components/buttons/#block

Upvotes: 3

Anees Hameed
Anees Hameed

Reputation: 6544

You can set the width of the button using styles but, also need to set the width of the label slot so that it fits well into the button. I have set width for the button, and also for the span that hold the button-text EG:

<v-btn dark large color="red" class="ma-2" style="width:100px;">
  <span class="text-truncate" style="width:80px;">Red</span>
</v-btn>
<v-btn dark large color="pink" class="ma-2" style="width:100px;">
  <span class="text-truncate" style="width:80px;">Pink</span>
</v-btn>
<v-btn dark large color="purple" class="ma-2" style="width:100px;">
  <span class="text-truncate" style="width:80px;">Purple</span>
</v-btn>
<v-btn dark large color="purple" class="ma-2" style="width:100px;">
  <span class="text-truncate" style="width:80px;">Purple</span>
</v-btn>
<v-btn dark large color="light-blue" class="ma-2" style="width:100px;">
  <span class="text-truncate" style="width:80px;">Light Blue</span>
</v-btn>
<v-btn dark large color="brown" class="ma-2" style="width:100px;">
  <span class="text-truncate" style="width:80px;">Brown</span>
</v-btn>
<v-btn dark large color="orange" class="ma-2" style="width:100px;">
  <span class="text-truncate" style="width:80px;">Orange</span>
</v-btn>
<v-btn dark large color="green" class="ma-2" style="width:100px;">
  <span class="text-truncate" style="width:80px;">Green</span>
</v-btn>
<v-btn dark large color="teal" class="ma-2" style="width:100px;">
  <span class="text-truncate" style="width:80px;">Teal</span>
</v-btn>
<v-btn dark large color="yellow" class="ma-2" style="width:100px;">
  <span class="text-truncate" style="width:80px;">Yellow</span>
</v-btn>
<v-btn dark large color="cyan" class="ma-2" style="width:100px;">
  <span class="text-truncate" style="width:80px;">Cyan</span>
</v-btn>
<v-btn dark large color="amber" class="ma-2" style="width:100px;">
  <span class="text-truncate" style="width:80px;">Amber</span>
</v-btn>
<v-btn dark large color="lime" class="ma-2" style="width:100px;">
  <span class="text-truncate" style="width:80px;">Lime</span>
</v-btn>
<v-btn dark large color="grey" class="ma-2" style="width:100px;">
  <span class="text-truncate" style="width:80px;">Grey</span>
</v-btn>
<v-btn dark large color="blue-grey" class="ma-2" style="width:100px;">
  <span class="text-truncate" style="width:80px;">Blue-Grey</span>
</v-btn>
<v-btn dark large color="black" class="ma-2" style="width:100px;">
  <span class="text-truncate" style="width:80px;">Black</span>
</v-btn>

Upvotes: 1

Related Questions