CODEWITHSUNDEEP
vue.jsvuetify.js
Andrei Maieras
Andrei Maieras

Reputation: 706

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

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 :)

Upvotes: 0

Views: 1395

Answers (2)

AlexSakai06
AlexSakai06

Reputation: 140

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.

Upvotes: 1

Nima Ebrazeh
Nima Ebrazeh

Reputation: 1306

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.

Upvotes: 1

Related Questions