I am using Vuetify card with a layout and rendering some dynamic vuetify ponents inside of the card on checkbox selection which renders either a divider, a spacer, toolbar or button but i am not able to figure out how can i make the buttons span the entire width?

Basically the dynamic button should look like the button at the end rendering the entire width.

Please check this codepen.

Please check this working example:-

new Vue({
  el: "#app",
  data() {
    return {
      pricing: [{
          text: "Actual price:",
          value: "$17,000",
        },
        {
          text: " Discount",
          value: "$12,345",
        }
      ],
      elements: [{
          title: "Divider",
          value: "v-divider"
        },
        {
          title: "Toolbar",
          value: "v-toolbar"
        },
        {
          title: "Button",
          value: "v-btn"
        }
      ],
      selected: []
    };
  }
});

<script src=".5.17/vue.js"></script>
<script src="/[email protected]/dist/vuetify.min.js"></script>
<link rel="stylesheet"  href=':300,400,500,700|Material+Icons'>
<link href="/[email protected]/dist/vuetify.min.css" rel="stylesheet" />

<div id="app">
  <v-app id="inspire">
    <v-container>
      <v-layout row>
        <v-flex xs6>
          <v-card>
            <v-card-text>
              <v-layout row justify-space-between v-for="option in pricing" :key="option.value" class="my-3">
                <span :class="option.class">{{option.text}}</span>
                <ponent v-for="(el, i) in selected" :key="i" :is="el.value"></ponent>
                <span>{{option.value}}</span>
              </v-layout>
              <v-layout row justify-center>
                <v-flex xs11>
                  <v-btn block>
                    Request
                  </v-btn>
                </v-flex>
              </v-layout>
            </v-card-text>
          </v-card>
          <v-flex v-for="el in elements" :key="el.value">
            <v-checkbox :value="el" v-model="selected" :label="el.title">
            </v-checkbox>
          </v-flex>
        </v-flex>
      </v-layout>
    </v-container>
  </v-app>
</div>

I am using Vuetify card with a layout and rendering some dynamic vuetify ponents inside of the card on checkbox selection which renders either a divider, a spacer, toolbar or button but i am not able to figure out how can i make the buttons span the entire width?

Basically the dynamic button should look like the button at the end rendering the entire width.

Please check this codepen.

Please check this working example:-

new Vue({
  el: "#app",
  data() {
    return {
      pricing: [{
          text: "Actual price:",
          value: "$17,000",
        },
        {
          text: " Discount",
          value: "$12,345",
        }
      ],
      elements: [{
          title: "Divider",
          value: "v-divider"
        },
        {
          title: "Toolbar",
          value: "v-toolbar"
        },
        {
          title: "Button",
          value: "v-btn"
        }
      ],
      selected: []
    };
  }
});

<script src="https://cdnjs.cloudflare./ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdn.jsdelivr/npm/[email protected]/dist/vuetify.min.js"></script>
<link rel="stylesheet"  href='https://fonts.googleapis./css?family=Roboto:300,400,500,700|Material+Icons'>
<link href="https://cdn.jsdelivr/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet" />

<div id="app">
  <v-app id="inspire">
    <v-container>
      <v-layout row>
        <v-flex xs6>
          <v-card>
            <v-card-text>
              <v-layout row justify-space-between v-for="option in pricing" :key="option.value" class="my-3">
                <span :class="option.class">{{option.text}}</span>
                <ponent v-for="(el, i) in selected" :key="i" :is="el.value"></ponent>
                <span>{{option.value}}</span>
              </v-layout>
              <v-layout row justify-center>
                <v-flex xs11>
                  <v-btn block>
                    Request
                  </v-btn>
                </v-flex>
              </v-layout>
            </v-card-text>
          </v-card>
          <v-flex v-for="el in elements" :key="el.value">
            <v-checkbox :value="el" v-model="selected" :label="el.title">
            </v-checkbox>
          </v-flex>
        </v-flex>
      </v-layout>
    </v-container>
  </v-app>
</div>

Any help will be appreciated. Thank you so much.

• javascript
• css
• vue.js
• vuetify.js

• "the whole width?" you talk about the edges of the card? ("no padding"). – Ezra Siton Commented May 13, 2020 at 17:58
• my bad, definitely padding. like as much width as a flex xs11 would take. – Somethingwhatever Commented May 13, 2020 at 17:58
• Use .flex.xs12 (12 = flex-basis: 100%;). – Ezra Siton Commented May 13, 2020 at 17:59
• nevermind. @EzraSiton it worked. – Somethingwhatever Commented May 13, 2020 at 18:00
• 1 You can add this as an answer. i'll accept it. – Somethingwhatever Commented May 13, 2020 at 18:01

1 Answer 1

Use .flex.xs12 (12 = flex-basis: 100%;) -or- remove xs12 (And add button block attribute = flex: 1 0 auto;).

<!-- block buttons extend the full available width -->
<template>
  <v-btn block>
    Block Button
  </v-btn>
</template>

https://vuetifyjs./en/ponents/buttons/#block