Проверять текстовые поля в одну строку - PullRequest
Новая
       45

Проверять текстовые поля в одну строку

0 голосов
/ 08 октября 2019

У меня есть этот шаблон для компонента Vue (см. Его в 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>

, где placeholders - это массив типа: 

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

и some-class находится в разделе стилей компонента: 

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

Я бы хотел, чтобы они были все в одной строке, чтобы я мог прокручивать по горизонтали. Но вместо этого я получаю это:

enter image description here

Как настроить стиль, чтобы увидеть все текстовые поля в одной строке?

1 Ответ

1 голос
/ 08 октября 2019

Vuetify использует гибкую сетку. Причина, по которой он не переполняется, заключается в том, что вы должны установить flex-wrap на nowrap.

. Просто добавьте приведенные ниже стили к вашему v-row: 

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

ИзмененоКодовый код здесь: https://codepen.io/CodingDeer/pen/zYYGOGd

...