Как создать столбец с фиксированной позицией в модальном диалоговом окне Bootstrap-4 - PullRequest
Новая
       12

Как создать столбец с фиксированной позицией в модальном диалоговом окне Bootstrap-4

0 голосов
/ 04 апреля 2019

Я создаю модальный диалог Bootstrap 4.У меня уже есть верхняя (верхний колонтитул) и нижняя (нижний колонтитул) статика, а также модальные прокрутки тела.Я хотел бы разделить модальное тело на 40% ширины левого столбца, который также является статическим, и 60% правого столбца, который прокручивается (основное тело).

(https://i.imgur.com/INLEngZ.png)

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

<!-- Modal lightbox for bg preview and cancel/save selections -->
<div class="modal fade" id="bgSelector" tabindex="-1" role="dialog" width="100%" aria-labelledby="modalTitle" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <form name="bgForm" id="bgForm" action="#blah" method="post">
        <div class="modal-header bg-white d-block" style="position: sticky; top: 0; z-index: 1000;">
          <button type="button" class="close float-right align-items-start" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h5 class="text-info text-center" id="modalTitle">Select background image</h5>
        </div>
        <div class="modal-body d-flex">
          <div class="column postition-sticky" style="width: 40%; border: 1px solid red;">
            <p class="w-100 text-center" style="z-index: 1000;">Select an image to use in the background...</p>
            <!-- Dynamic preview goes here -->
          </div>
          <div class="theme-list column" style="width: 60%; border: 1px solid blue;">
            <!-- Body content goes here -->
          </div>
        </div>
        <div class="modal-footer justify-content-center bg-white" style="position: sticky; bottom: 0; z-index: 1000;">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
          <button type="submit" class="btn btn-primary" form="themeForm" formmethod="post" formaction="#blah">Save Background Image</button>
        </div>
      </form>
    </div>
  </div>
</div>

1 Ответ

0 голосов
/ 04 апреля 2019

создать дочерний элемент [который можно прокручивать] внутри этого элемента: 

 <div class="theme-list column" style="width: 60%; border: 1px solid blue;">
        <!-- Child element which can be scrolled goes here -->
    </div>

установить родительский элемент overflow-y: прокрутка и фиксированная высота, а дочерний элемент должен иметь height: auto.

Также для предложения встроенный стиль: ширина: 60%; граница: 1px сплошной синий; не очень хорошая идея Может быть, вы должны положить его в файл CSS / SCSS. Или лучше просто использовать классы начальной загрузки.

...