javascript - Vuetify text fields on one line - Stack Overflow

admin管理员组

文章数量:1384497

I have this template for a Vue ponent (See it in CODEPEN):

<div class="some-class">
    <v-form >
        <v-container @click="someMethod()">
            <v-row>
                <v-col cols="3" sm="3" v-for="p in placeholders" :key="p">
                    <v-text-field :placeholder="p" single-line outlined >
                    </v-text-field>
                </v-col>
            </v-row>
        </v-container>
    </v-form>
</div>

where placeholders is an array like:

['Title 1', 'Title 2', 'Title 3',...'Title 21']

and some-class is in the style section of the ponent:

<style>
    div.some-class {
        display: inline-block;
        max-width: 100%;
        overflow-x: auto;
    }
</style>

I would like to have them all on one line so I can scroll horizontally. But instead I get this:

How can I tweak the style to see all the text fields on one line?

I have this template for a Vue ponent (See it in CODEPEN):

<div class="some-class">
    <v-form >
        <v-container @click="someMethod()">
            <v-row>
                <v-col cols="3" sm="3" v-for="p in placeholders" :key="p">
                    <v-text-field :placeholder="p" single-line outlined >
                    </v-text-field>
                </v-col>
            </v-row>
        </v-container>
    </v-form>
</div>

where placeholders is an array like:

['Title 1', 'Title 2', 'Title 3',...'Title 21']

and some-class is in the style section of the ponent:

<style>
    div.some-class {
        display: inline-block;
        max-width: 100%;
        overflow-x: auto;
    }
</style>

I would like to have them all on one line so I can scroll horizontally. But instead I get this:

How can I tweak the style to see all the text fields on one line?

• javascript
• css
• vue.js
• vue-ponent
• vuetify.js

Share Improve this question Follow edited Oct 8, 2019 at 15:57 Manuel Perez Heredia asked Oct 8, 2019 at 15:36 Manuel Perez HerediaManuel Perez Heredia 2,35733 gold badges2020 silver badges2626 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

Vuetify uses a flex grid. The reason that it's not overflowing is that you have to set the flex-wrap to nowrap.

Basically, just add the styles below to your v-row:

.nowrap-overflow {
    flex-wrap: nowrap;
    overflow-x: auto;
}

Modified codepen here: https://codepen.io/CodingDeer/pen/zYYGOGd

本文标签： javascriptVuetify text fields on one lineStack Overflow