英文:
How to decrease list height in v-select vuetify3
问题
I can't decrease list height... list height becomes full screen height
<img src="https://i.stack.imgur.com/Y8rew.png" height="400">
I tried a lot of ways, but nothing happened
英文:
I can't decrease list height... list height becomes full screen height
<img src="https://i.stack.imgur.com/Y8rew.png" height="400">
I tried a lot of ways, but nothing happened
答案1
得分: 0
以下是您要翻译的内容:
"That is weird, as per default, the (max-)height is set to 310px (see source).
But you can change the height by passing a configuration object to the underlying v-menu
through the :menu-props
prop. You have to adjust the :max-height
:
<v-select
:menu-props="{
'max-height': 310
}"
/>
英文:
That is weird, as per default, the (max-)height is set to 310px (see source).
But you can change the height by passing a configuration object to the underlying v-menu
through the :menu-props
prop. You have to adjust the :max-height
:
<v-select
:menu-props="{
'max-height': 310
}"
/>
<!-- begin snippet: js hide: true console: false babel: false -->
<!-- language: lang-js -->
const { createApp, ref, computed} = Vue;
const { createVuetify } = Vuetify
const vuetify = createVuetify()
const app = {
setup(){
const items = Array.from({length: 100}, (_,i) => `Options ${i+1}`)
const maxHeightNumber = ref(0)
const maxHeight = computed(() => maxHeightNumber.value > 0 ? maxHeightNumber.value + 'px' : 'auto')
return { items, maxHeight, maxHeightNumber}
}
}
createApp(app).use(vuetify).mount('#app')
<!-- language: lang-html -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/vuetify@3.1.8/dist/vuetify.min.css" />
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css" rel="stylesheet">
<div id="app">
<v-app>
<v-main>
<div>
<v-select
:items="items"
label="Options Options Options"
:menu-props="{
'max-height': maxHeight
}"
/>
</div><div>
<v-text-field :label="'max height (' + maxHeight + ')'" type="number" step="100" v-model="maxHeightNumber"></v-text-field>
</div>
</v-main>
</v-app>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@3.1.8/dist/vuetify.min.js"></script>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论