Как переполнить столбец внутри модального? - PullRequest
Новая
       18

Как переполнить столбец внутри модального?

0 голосов
/ 31 января 2020

Я потратил несколько часов, пытаясь заставить это работать. У меня есть (полный экран) модал, и он сгибает свое тело, чтобы расти в соответствии с модалом. Внутри этого тела у меня есть контейнер, строка и 2 столбца. Поскольку модальное тело не имеет установленной высоты, я не могу ограничить высоту (может быть, максимальную высоту) столбца, чтобы он переполнялся.

Как правильно добиться ожидаемого поведения в этот сценарий? Я хочу, чтобы модальное тело учитывало высоту экрана, но активировало переполнение столбца.

https://jsfiddle.net/f3t5p6xq

<div class="modal" id="fullModal">
    <div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
        <h4 class="modal-title">Full Screen Modal</h4>
        </div>
        <div class="modal-body">
        <div style="width: 80%; display: inline-block;">asd</div>
        <div
            class="overflow-auto"
            style="width: 20%; display: inline-block"
        >
            Right Column
            <p>
            new line<br />new line<br />new line<br />new line<br />new
            line<br />new line<br />new line<br />new line<br />new line<br />new
            line<br />new line<br />new line<br />new line<br />new line<br />new
            line<br />new line<br />new line<br />new line<br />new line<br />new
            line<br />new line<br />new line<br />new line<br />new line<br />new
            line<br />new line<br />new line<br />new line<br />new line<br />new
            line<br />new line<br />new line<br />new line<br />new line<br />new
            line<br />
            </p>
        </div>
        </div>
        <div class="modal-footer">
        <button class="btn btn-secondary">
            Save
        </button>
        </div>
    </div>
    </div>
</div>

<button
    id="fullModalButton"
    type="button"
    class="btn btn-primary"
    data-toggle="modal"
    data-target="#fullModal"
>
    Click me
</button>

CSS

p {
  line-height: 50px;
}

.modal-dialog {
  padding: 0.5rem;
  margin: 0;
  width: 100%;
  max-width: 100%;
  height: 100vh;
  max-height: 100vh;
}

.modal-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: 100%;
}

.modal-body {
  /* modal-body dimensions are automatically calculated, since it uses flex */
  /* the body expands, while header and footer have fixed height */
}

.container-fluid {
  /* since modal-body doesn't have a height set, I can't set max-height in this element */
}

.row {
  /* since container-fluid doesn't have a height set, I can't set max-height in this element */
}

.col-4 {
  overflow: auto;
  /* since row doesn't have a height set, I can't set max-height in this element */
  /* this causes this column to overflow */
}

Ответы [ 2 ]

1 голос
/ 31 января 2020

Я заработал, добавив .overflow-auto ко всем родительским divам (начиная с .modal-content) и указав .h-100 на .container-fluid, .row и .col-4 Chrome DevTools очень помогают в этом вид вопроса.

0 голосов
/ 31 января 2020

Поскольку вы используете bootstrap, я не уверен, почему вы бы добавили пользовательский CSS, который уже встроен в bootstrap. Вот что я бы сделал. Я установил ограничение высоты столбца 300px в качестве примера, или вы можете установить его в зависимости от размера экрана, используя @media или percentage и установить переполнение для его элемента: 

.h-300 {
  height: 300px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />

<!-- Modal -->
<div class="modal-dialog modal-dialog-centered" role="document">
  <div class="modal-content">
    <div class="modal-header">
      <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
    </div>
    <div class="modal-body">

      <div class="container">
        <div class="row justify-content-md-center">
          <div class="col-8">
            ...
          </div>
          <div class="col-4 h-300 overflow-auto">
            <p>
              new line<br />new line<br />new line<br />new line<br />new line<br />new line<br />new line<br />new line<br />new line<br />new line<br />new line<br />new line<br />new line<br />new line<br />new line<br />new line<br />new line<br />new
              line<br />new line<br />new line<br />new line<br />new line<br />new line<br />new line<br />new line<br />new line<br />new line<br />new line<br />new line<br />new line<br />new line<br />new line<br />new line<br />new line<br />new
              line<br />
            </p>
          </div>
        </div>
      </div>
    </div>
    <div class="modal-footer">
      Footer
    </div>
  </div>
</div>
...