Как сделать ширину v-select равной ширине контента во vuetify?

Question

[Руслан]

У меня вот такой код:

<v-row align="center" justify="space-between">
    <v-col>
        <v-pagination left :length="paginatorPages" v-model="currentPage" :disabled="loadInProgress">
        </v-pagination>
    </v-col>
    <v-col>
        <v-select :items="pagesizes" v-model="filters.pagesize" @change="changePagesize" :disabled="loadInProgress"></v-select>
        </v-col>
    </v-row>

в v-select отображаются такие элементы: 4,10,20,50,100.

Как мне нужно изменить код, чтобы v-select занимал не всю ширину контейнера, в котором он находиться, а столько, сколько ему необходимо для отображения своих чисел и чтобы он был выровнен по правому краю.

и что нужно сделать, чтобы v-pagination был прилеплен к левому краю.

Спасибо.

Answer 1

[Mr. Grump]

Вы можете для v-col задать пропc cols="auto" что скажет колонкам не занимать все свободное пространство на оси, а между колонками вставить элемент v-spacer который на оборот будет стараться занять все свободное пространство (собственно на этом его все задачи и заканчиваются). Так же могу посоветовать скрыть невидимый input у v-select при помощи стилей, он так же дет лишнюю не желательную ширину

Comments

[Руслан]

Спасибо!

Почему-то не получается определить css в блоке style scoped (без scoped работает)...

Никак не могу понять, почему нельзя реализовать такие типичные сценарии без использования css, а только за счет компонентов и их параметров.

[Mr. Grump]

Руслан, scoped генерирует уникальные scope атрибуты (v-xxxxxxxx) лишь непосредственно элементам лежащих в области шаблона компонента, то есть дочерние элементы внутри подключаемых компонентов будут иметь уже свой совершенно другой scope селектор не в ходящий в scope текущего компонента (либо вовсе не иметь) в то время как в css scoped уникальный атрибут будет добавлен к каждому селектору

CSS scoped:

.select input { ... }

... Превратится в ...

.select[v-asd34fd] input[v-asd34fd] { ... }

Template:

<v-select v-model="user" : items="users"></v-select>

... Превратится в (приблизительно) ...

<div v-asd34fd class="v-select">
  <div class="v-select__label"></div>
  <input class="v-select__hidden-input"/>
</div>

Answer 2

[Игорь]

Как мне нужно изменить код, чтобы v-select занимал не всю ширину контейнера, в котором он находиться, а столько, сколько ему необходимо для отображения своих чисел и чтобы он был выровнен по правому краю.

Да там же в примерах есть как это делается