Vuetify - v-select隐藏在v-step在v-dialog

Question

我试图保持v-select菜单附属于v-select但同时也有它在对话框中打开时，在下面的代码依存中你可以看到年龄下拉菜单隐藏在它的容器中我不知道如何使它可见

我有v-dialog ->v-stepper→v-select

<v-select
attach
:items="['0-17', '18-29', '30-54', '54+', '60', '77']"
label="Age*"
required
></v-select>

https://codepen.io/amaieras/pen/VwWRzpL?编辑= 101

注:我不想删除附件，客户端希望它被粘在v-select上:)

Answer 1

vuetify中的步进组件默认为overflow: hidden样式。您可以在CSS中将此属性更改为visible:

.v-stepper,
.v-stepper__wrapper, 
.v-stepper__items {
overflow: visible;
}

你也可以访问这个代码库。

Answer 2

因为Modal有固定的大小。你的v-select几乎在模态的底部。如果您将该字段移到顶部或中间，它将为您工作。

或者你可以把模态高度设置得比现在大。

请添加这个css。

.v-menu__content .theme--light .menuable__content__active {
position: initial !important;
}

这将为您工作。