How to make v-select width equal to content width in vuetify?

Question

Vue.js

I have this code:

<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 displays items like this: 4,10,20,50,100.
How do I change the code so that the v-select doesn't take up the entire width of the container it's in, but as much as it needs to display its numbers and that it's right-aligned.
and what needs to be done to get the v-pagination to stick to the left edge.
Thank you.

Answer 1

You can v-colset a prop cols="auto"to tell the columns not to take up all the free space on the axis, but to insert an element between the columns v-spacerthat, on the contrary, will try to take all the free space (in fact, this is where all its tasks end). I can also advise you to hide the invisible inputy v-selectusing styles, it also creates an extra unwanted width

Answer 2

How do I change the code so that the v-select does not take up the entire width of the container it is in, but as much as it needs to display its numbers and so that it is right-aligned.

Yes, there are examples on how to do it.