Переполнение не показывает все содержимое (вырезать)

#html #css #overflow #vuetify.js

#HTML #css #переполнение #vuetify.js

Вопрос:

Я использую vuetify и хочу создать шаговый режим прокрутки внутри диалогового окна.

Вот codepen

Я применил свой класс stepper-scrollable-content к 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>

Проблема в том, что когда я нахожусь на мобильном устройстве или когда я изменяю размер окна браузера по вертикали, overflow не отображает все содержимое. Я не могу видеть все входные данные формы. Переполнение вырезано.

Как я могу это исправить?

1. оно было скрыто под разделом Отмены продолжения. Вам нужно установить некоторые минимальные высоты

2. @GifCo можете ли вы показать мне, как вы это делаете, используя мой codepen? потому что я пытался установить некоторые минимальные высоты, но изменений нет

3. установите минимальную высоту: 300 пикселей на <v-dialog v-model=»dialog» с постоянной прокруткой, максимальная ширина= «600 пикселей»>

4. @GifCo это не работает

5. Я не знаю, как вы устанавливаете стили с помощью используемой вами библиотеки, но это работает в инструментах разработки.

Ответ №1:

Если вы хотите ограничить высоту вашего .v-card. , вам нужно будет сделать это на .v-card самом:

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

Обновлено перо: https://codepen.io/andrei-gheorghiu/pen/wOgXYM

1. Спасибо, это работает именно так, как я хочу! Если я делаю только max-height: calc(100% - 71px); с прокручиваемым содержимым, это работает. Но я не знаю, что именно. Я никогда не использовал calc.

2. @John — MDN: calc() , W3C: #calc-нотация .