I have a situation where I have a paragraph, which needs to have a select box right in the middle of it. However, v-select is a bit too big and doesn't seem to allow you to control its width.
This is currently what it looks like:
new Vue({
el: '#root',
vuetify: new Vuetify(),
template: `
<div style="{ margin: '20px' }">
<v-row>
<v-col col="12">
<p>I would like to have the following select: <v-select placeholder="0"/> shrunk and displayed with this text all in line. How can I do that?</p>
</v-col>
</v-row>
</div>
`
})<script src=".5.17/vue.js"></script>
<script src="/[email protected]/dist/vue.js"></script>
<script src="/[email protected]/dist/vuetify.js"></script>
<link href="/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
<link href="/[email protected]/dist/vuetify.min.css" rel="stylesheet">
<div id="root"></div>I have a situation where I have a paragraph, which needs to have a select box right in the middle of it. However, v-select is a bit too big and doesn't seem to allow you to control its width.
This is currently what it looks like:
new Vue({
el: '#root',
vuetify: new Vuetify(),
template: `
<div style="{ margin: '20px' }">
<v-row>
<v-col col="12">
<p>I would like to have the following select: <v-select placeholder="0"/> shrunk and displayed with this text all in line. How can I do that?</p>
</v-col>
</v-row>
</div>
`
})<script src="https://cdnjs.cloudflare./ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdn.jsdelivr/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr/npm/[email protected]/dist/vuetify.js"></script>
<link href="https://cdn.jsdelivr/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">
<div id="root"></div>Based on the API docs, there doesn't seem to be an easy way to control for its size. What is the proper way of getting this done?
Share Improve this question edited Nov 17, 2020 at 17:24 Dan 63.2k18 gold badges111 silver badges119 bronze badges asked Nov 17, 2020 at 17:20 theJulstheJuls 7,49019 gold badges96 silver badges182 bronze badges2 Answers
Reset to default 4You will have to override the Vuetify css with your own styles. A good way to do this is to create some kind of override class for your UI or for specific things you need to have higher in the cascade. Then you can call the Vuetify classes inside that class and most of the time it will make your styles fire last. If that still fails, you can resort to adding !important after the style that isn't picking up.
new Vue({
el: '#root',
vuetify: new Vuetify(),
template: `
<div class="override-class" style="{ margin: '20px' }">
<v-row>
<v-col col="12">
<p>I would like to have the following select: <v-select placeholder="0"/> shrunk and displayed with this text all in line. How can I do that?</p>
</v-col>
</v-row>
</div>
`
}).override-class .v-input {
display: inline-block;
width: 100px;
}<script src="https://cdnjs.cloudflare./ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdn.jsdelivr/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr/npm/[email protected]/dist/vuetify.js"></script>
<link href="https://cdn.jsdelivr/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">
<div id="root"></div>You could apply an inline CSS style style="width:64px;display:inline-flex"
new Vue({
el: '#root',
vuetify: new Vuetify(),
template: `
<div style="{ margin: '20px' }">
<v-row>
<v-col col="12">
<p>I would like to have the following select: <v-select style="width:64px" placeholder="0"/> shrunk and displayed with this text all in line. How can I do that?</p>
</v-col>
</v-row>
</div>
`
})<script src="https://cdnjs.cloudflare./ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdn.jsdelivr/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr/npm/[email protected]/dist/vuetify.js"></script>
<link href="https://cdn.jsdelivr/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">
<div id="root"></div>