0

Всем доброго времени суток! Есть модальное окно и, изначально было так, что скроллбар прокручивал всю область. Изначальный вид Необходимо перенести его ниже. Я это сделал, но работает криво. Для всего модального окна задал значение overflow-y: hidden. А для дочернего элемента с классом content (где расположено всё, что ниже заголовка и до кнопок "OK" и "Отмена"), задал overflow-y: auto и height: -webkit-fill-available. В результате, скролл есть, но он уходит за рамки модального окна. После внесения правок И, разумеется, кнопок снизу не видно.

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div class="v-dialog pc-modal-dialog v-dialog--active" style="width: 1200px;">
  <div class="pc-dialog-card v-card v-sheet theme--light">
    <div class="v-card__title headline grey lighten-2 v-card__title--primary">Выбор изображения</div>
    <div class="v-card__text content">
      <!-- Всякие элементы управления, много-много картинок -->
    </div>
    <hr class="v-divider theme--light">
    <div class="v-card__actions">
      <div data-v-66109643="" class="container d-flex align-right">
        <div data-v-66109643="" class="spacer"></div>
        <button data-v-66109643="" type="button" class="v-btn theme--light">
               <div class="v-btn__content">OK</div>
            </button>
        <button data-v-66109643="" type="button" class="v-btn theme--light">
               <div class="v-btn__content">Отмена</div>
            </button>
      </div>
    </div>
  </div>
</div>

1 ответ 1

1

Попробуйте так:

/* visual */

html,
body {
  margin: 0;
}

.v-dialog {
  background: gray;
}

.v-card {
  border: 1px solid #555;
  width: 90%;
  background: #fff;
  height: 50%;
  box-shadow: 3px 3px 3px #555;
}

.v-card__title,
.v-card__actions {
  background: #ccc;
  padding: 10px;
}

.v-card__text {
  padding: 10px;
}


/* styling */

html,
body {
  height: 100%;
}

.v-dialog {
  height: 100%;
  position: relative;
}

.v-card {
  display: flex;
  flex-direction: column;
  top: 50%;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
}

.v-card__text {
  overflow: auto;
  flex: 1;
}
<div class="v-dialog pc-modal-dialog v-dialog--active">
  <div class="pc-dialog-card v-card v-sheet theme--light">
    <div class="v-card__title headline grey lighten-2 v-card__title--primary">Выбор изображения</div>
    <div class="v-card__text content">
      Всякие элементы управления, много-много картинок <br>Всякие элементы управления, много-много картинок <br>Всякие элементы управления, много-много картинок <br>Всякие элементы управления, много-много картинок <br>Всякие элементы управления, много-много
      картинок <br>Всякие элементы управления, много-много картинок <br>Всякие элементы управления, много-много картинок <br>Всякие элементы управления, много-много картинок <br>Всякие элементы управления, много-много картинок <br>Всякие элементы управления,
      много-много картинок <br>Всякие элементы управления, много-много картинок <br>Всякие элементы управления, много-много картинок <br>Всякие элементы управления, много-много картинок <br>Всякие элементы управления, много-много картинок <br>Всякие элементы
      управления, много-много картинок <br>Всякие элементы управления, много-много картинок <br>Всякие элементы управления, много-много картинок <br>Всякие элементы управления, много-много картинок <br>Всякие элементы управления, много-много картинок
      <br>Всякие элементы управления, много-много картинок <br>
    </div>
    <hr class="v-divider theme--light">
    <div class="v-card__actions">
      <div data-v-66109643="" class="container d-flex align-right">
        <div data-v-66109643="" class="spacer"></div>
        <button data-v-66109643="" type="button" class="v-btn theme--light">
               <div class="v-btn__content">OK</div>
            </button>
        <button data-v-66109643="" type="button" class="v-btn theme--light">
               <div class="v-btn__content">Отмена</div>
            </button>
      </div>
    </div>
  </div>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.