CODEWITHSUNDEEP
vue.jsgridresponsivevuetify.js
24sharon
24sharon

Reputation: 1975

Vuetify grid layout v-layout v-flex

I want the textbox to be 6 column on screen greater than sm and 12 column for mobile.

I use the vuetify grid but it does not work as expected.

this is my code:

<v-card-text>
        <v-layout   warp>
          <v-flex xs12 sm6  class="pa-1">
            <v-text-field
              ref="name"
              v-model="password.name"
              label="Name"
              solo
              placeholder="Full Name"
              counter="25"
            ></v-text-field>
          </v-flex>
          <v-flex xs12 sm6  class="pa-1">
            <v-combobox
              v-model="password.keys"
              label="Add keys"
              chips
              solo
              multiple
            >
              <template slot="selection" slot-scope="data">
                <v-chip :selected="data.selected" close @input="remove(data.item)">
                  <strong>{{ data.item}}</strong>&nbsp;
                </v-chip>
              </template>
            </v-combobox>
          </v-flex>
        </v-layout>

In the mobile view, the elements are in the same row.

What can be the reason, and how can I fix it?

This is the mobile version:

enter image description here

Upvotes: 3

Views: 23167

Answers (2)

Daniel Danielecki
Daniel Danielecki

Reputation: 10580

For new comers looking why v-layout & v-flex don't work anymore in Vuetify 3: it looks like those have been removed and are no longer working. Please use v-row & v-col respectively.

Upvotes: 4

Trent
Trent

Reputation: 3103

You have a typo on the "v-layout" should be wrap not warp.

https://codesandbox.io/s/my49o8vo9y

Upvotes: 4

Related Questions