How can I prevent the menu from covering the input box in Vuetify version 2.3.18?
I came across a potential solution here, but it didn't work for me: https://codepen.io/jrast/pen/NwMaZE?editors=1010
I also found an issue on the Vuetify github page that might be related: https://github.com/vuetifyjs/vuetify/issues/2377
For reference, here is a Codepen example using Vuetify's v-select component:
https://codepen.io/zmrqodfu/pen/abZeVOP?editors=101
Vue.use(Vuetify);
var vm = new Vue({
el: "#app",
methods: {
},
data () {
return {
select: { state: 'Florida', abbr: 'FL' },
hideDetails: false,
items: [
{ state: 'Florida', abbr: 'FL' },
{ state: 'Georgia', abbr: 'GA' },
{ state: 'Nebraska', abbr: 'NE' },
{ state: 'California', abbr: 'CA' },
{ state: 'New York', abbr: 'NY' }
]
}
},
});<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.3/vue.js"></script>
<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c1b7b4a4b5a8a7b881f1eff0f5eff9">[email protected]</a>/dist/vuetify.min.js"></script>
<link rel=stylesheet type="text/css" href="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b9cfccdccdd0dfc0f98997888d9781">[email protected]</a>/dist/vuetify.min.css">
<div id="app">
<v-app dark>
<v-select
v-bind:items="items"
v-model="select"
label="Select"
single-line
:hide-details="hideDetails"
hint="Hint of Select"
item-text="state"
item-value="abbr"
return-object
autocomplete
></v-select>
</v-app>
</div>