I'm facing an issue with a Vuetify v-select that appears wider than intended when placed within a container set to display: flex, due to an empty input causing the dropdown to stretch out.
Here's a screenshot showing the space taken up by the problematic input:
https://i.sstatic.net/5UfI4.png
Below is a code snippet showcasing the problem. When the container for the dropdown is made larger, like full screen width, the issue becomes more pronounced with the dropdown extending far beyond necessary, leaving potentially only a small portion visible.
My goal is to have the dropdown size dynamically adjust to fit the longest text it contains, which in this case is "apple".
new Vue({
el: '#app',
vuetify: new Vuetify(),
data () {
return {
product: {},
products: [{title: 'apple', upc: '123'}],
}
},
created() {
this.product = this.products[0];
},
}).app-container {
display: flex;
}
.message {
width: 200px;
}
input {
height: 100%;
}<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3244475772001c4a">[email protected]</a>/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7e080b1b0a1718073e4c5006">[email protected]</a>/dist/vuetify.js"></script><link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9afcf5f4eedaaeb4e2">[email protected]</a>/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="116764746578776851233f69">[email protected]</a>/dist/vuetify.min.css" rel="stylesheet">
<div id="app">
<v-app id="inspire">
<div class="app-container">
<div>
<v-select
hide-details
dense
attach
outlined
return-object
v-model="product"
:items="products"
item-text="title"
></v-select>
</div>
<div class="message">Why is there a sibling <code>input</code> element next to the element that contains <code>apple</code> that takes up a bunch of space? I only want the dropdown as wide as the longest text in the dropdown, which in this case is "apple".</div>
</div>
</v-app>
</div>Lastly, here's a screenshot from dev tools showing the tricky input: