CODEWITHSUNDEEP
javascriptvue.jsvuetify.js
Tom
Tom

Reputation: 6004

Set dropdown menu button width to block in VuetifyJS component

I'm using the VuetifyJS dropdown menu component and I need to get it to the same width of the other button in my attached example. Unfortunately the block settings don't work.

CodePen example of the issue: https://codepen.io/anon/pen/djvyVw?&editors=101

 <div id="app">
  <v-app id="inspire">
    <v-card>
      <v-flex xs10 offset-xs1>

        <v-btn block round depressed dark large color="green darken-4">
          <v-icon large>info</v-icon>
        </v-btn>

        <v-menu offset-y>
          <v-btn block outline round depressed dark large color="yellow darken-3" slot="activator">
            <v-icon>info</v-icon>Learn More</v-btn>
          <v-list>
            <v-list-tile v-for="(item, index) in items" :key="index" @click="" :class="item.color">
              <v-list-tile-title>{{ item.title }}</v-list-tile-title>
            </v-list-tile>
          </v-list>
        </v-menu>

      </v-flex>
    </v-card>

  </v-app>
</div>

How to get it to full width like the other button?

Upvotes: 1

Views: 3368

Answers (1)

akuiper
akuiper

Reputation: 214957

Simply give v-menu the full-width attribute:

<v-menu offset-y full-width>
   ...
</v-menu>

Upvotes: 2

Related Questions