CODEWITHSUNDEEP
htmlcssoverflowvuetify.js
John
John

Reputation: 4991

Overflow doesn't show all the content (cut)

I'm using vuetify and I want to make a scrollable stepper inside a dialog.

Here is a codepen

https://codepen.io/anon/pen/OqWQdy

I applied my class stepper-scrollable-content on the v-stepper-items

.stepper-scrollable-content {
  overflow: auto;
  max-height: 200px;
}


<v-stepper-items class="stepper-scrollable-content">
  <v-stepper-content step="1">
    ...
  </v-stepper-content>
</v-stepper-items>

The problem is when I'm on mobile or when I resize the browser's window vertically the overflow doesn't show all the content. I can't see all the form inputs. The overflow is cut.

overflow cut

How can I fix it ?

Upvotes: 0

Views: 892

Answers (1)

tao
tao

Reputation: 90208

If you want to limit the height of your .v-card. you'll need to do it on the .v-card itself: 

.stepper-scrollable-content {
   overflow: auto;
   max-height: calc(100% - 71px);
}
.v-card {
   max-height: 340px;
}

Updated pen: https://codepen.io/andrei-gheorghiu/pen/wOgXYM

Upvotes: 1

Related Questions