Vuetify - v-select hidden inside v-stepper inside v-dialog-CodePudding

I'm trying to keep the v-select menu attached to the v-select but in the meantime also have it over the dialog when open, in the bellow codepen you can see that the Age dropdown is hidden inside its container and I can't figure out how to make it visible

I have this hierarchy of 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?editors=101

P.S. I don't want to remove the attach, the client wants it to be glued to the v-select :)

CodePudding user response：

Stepper component in vuetify has overflow: hidden style by default. You can change this property to visible in CSS:

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

You can visit this codepen too.

CodePudding user response：

Because Modal has a fixed size. And your v-select is almost at the bottom of modal. If you move that field to top or middle, it will work for you.

Or you can make modal height larger than now.

Please add this css.

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

this will work for you.