Боковой модальный полноразмерный заголовок, тело и нижний колонтитул не равны

я создал модальное окно полной высоты, оно имеет длинное содержимое внутри модального тела, но когда я запускаю его, заголовок и тело, а нижний колонтитул не равны, я не знаю, исправит ли это размещение scrollspy в теге html body, надеюсь, вы можете помочь мне исправить. Спасибо.

вот мой модал:

<div class="modal fade right" id="modalPoll" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"
      data-backdrop="false">
      <div class="modal-dialog modal-full-height modal-right modal-notify modal-info" role="document">
        <div class="modal-content">
          <!--Header-->
          <div class="modal-header">
            <p class="heading lead">Feedback request
            </p>
         <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true" class="white-text">×</span>
            </button>
          </div>
      <!--Body-->
          <div class="modal-body" >
            <div class="text-center">
              <i class="fa fa-file-text-o fa-4x mb-3 animated rotateIn"></i>
              <p>
                <strong>Your opinion matters</strong>
              </p>
              <p>Have some ideas how to improve our product?
                <strong></strong>Give us your feedback.</strong>
              </p>
            </div>
            <hr>
       <!-- Radio -->
            <p class="text-center">
              <strong>Your rating</strong>
            </p>
            <div class="form-check mb-4">
          <input class="form-check-input" name="group1" type="radio" id="radio-179" value="option1" checked>
          <label class="form-check-label" for="radio-179">Very good</label>
        </div>
        <div class="form-check mb-4">
          <input class="form-check-input" name="group1" type="radio" id="radio-279" value="option2">
          <label class="form-check-label" for="radio-279">Good</label>
        </div>
        <div class="form-check mb-4">
          <input class="form-check-input" name="group1" type="radio" id="radio-379" value="option3">
          <label class="form-check-label" for="radio-379">Mediocre</label>
        </div>
        <div class="form-check mb-4">
          <input class="form-check-input" name="group1" type="radio" id="radio-479" value="option4">
          <label class="form-check-label" for="radio-479">Bad</label>
        </div>
        <div class="form-check mb-4">
          <input class="form-check-input" name="group1" type="radio" id="radio-579" value="option5">
          <label class="form-check-label" for="radio-579">Very bad</label>
        </div>
            <!-- Radio -->
        <p class="text-center">
              <strong>What could we improve?</strong>
            </p>
            <!--Basic textarea-->
            <div class="md-form">
              <textarea type="text" id="form79textarea" class="md-textarea form-control" rows="3"></textarea>
              <label for="form79textarea">Your message</label>
            </div>
            </div>
          <!--Footer-->
          <div class="modal-footer justify-content-center">
            <a type="button" class="btn btn-primary waves-effect waves-light">Send
              <i class="fa fa-paper-plane ml-1"></i>
            </a>
            <a type="button" class="btn btn-outline-primary waves-effect" data-dismiss="modal">Cancel</a>
          </div>
        </div>
      </div>
    </div>

вот мой текущий вывод:

ace 01.08.2018 источник

comment

вы используете бутстрап 4? - לבני מלכה 01.08.2018

comment

да я использую бутсрап 4 - ace 01.08.2018

comment

кстати у вас есть ненужные </strong> в <strong></strong>Give us your feedback.</strong> - לבני מלכה 01.08.2018

comment

можешь показать кнопку которая открывает модель - לבני מלכה 01.08.2018

comment

‹тип кнопки=класс кнопки=btn btn-primary data-toggle=modal data-target=#modalPoll›Запустить модальный режим‹/button› - ace 01.08.2018

comment

вы хотите, чтобы заголовок был fixed или сделать прокрутку до model? - לבני מלכה 01.08.2018

comment

я попробовал фиксированный заголовок, используя высоту 300 пикселей; и он исправил заголовок, но нижний колонтитул поднимается. - ace 01.08.2018

comment

посмотри мой ответ пожалуйста - לבני מלכה 01.08.2018

Ответы (2)

arrow_upward
0
arrow_downward

Используйте sticky-top для modal-header

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
  
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalPoll">Launch modal</button>

<div class="modal fade right" id="modalPoll" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" id="myModal"
      data-backdrop="false">
      <div class="modal-dialog modal-full-height modal-right modal-notify modal-info" role="document">
        <div class="modal-content">
          <!--Header-->
          <div class="modal-header sticky-top bg-primary">
            <p class="heading lead">Feedback request
            </p>
         <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true" class="white-text">×</span>
            </button>
          </div>
      <!--Body-->
          <div class="modal-body" >
            <div class="text-center">
              <i class="fa fa-file-text-o fa-4x mb-3 animated rotateIn"></i>
              <p>
                <strong>Your opinion matters</strong>
              </p>
              <p>Have some ideas how to improve our product?
                <strong>Give us your feedback.</strong>
              </p>
            </div>
            <hr>
       <!-- Radio -->
            <p class="text-center">
              <strong>Your rating</strong>
            </p>
            <div class="form-check mb-4">
          <input class="form-check-input" name="group1" type="radio" id="radio-179" value="option1" checked>
          <label class="form-check-label" for="radio-179">Very good</label>
        </div>
        <div class="form-check mb-4">
          <input class="form-check-input" name="group1" type="radio" id="radio-279" value="option2">
          <label class="form-check-label" for="radio-279">Good</label>
        </div>
        <div class="form-check mb-4">
          <input class="form-check-input" name="group1" type="radio" id="radio-379" value="option3">
          <label class="form-check-label" for="radio-379">Mediocre</label>
        </div>
        <div class="form-check mb-4">
          <input class="form-check-input" name="group1" type="radio" id="radio-479" value="option4">
          <label class="form-check-label" for="radio-479">Bad</label>
        </div>
        <div class="form-check mb-4">
          <input class="form-check-input" name="group1" type="radio" id="radio-579" value="option5">
          <label class="form-check-label" for="radio-579">Very bad</label>
        </div>
            <!-- Radio -->
        <p class="text-center">
              <strong>What could we improve?</strong>
            </p>
            <!--Basic textarea-->
            <div class="md-form">
              <textarea type="text" id="form79textarea" class="md-textarea form-control" rows="3"></textarea>
              <label for="form79textarea">Your message</label>
            </div>
            </div>
          <!--Footer-->
          <div class="modal-footer justify-content-center">
            <a type="button" class="btn btn-primary waves-effect waves-light">Send
              <i class="fa fa-paper-plane ml-1"></i>
            </a>
            <a type="button" class="btn btn-outline-primary waves-effect" data-dismiss="modal">Cancel</a>
          </div>
        </div>
      </div>
    </div>

לבני מלכה 01.08.2018

comment

разве вы не видите, что заголовок fixed? - לבני מלכה; 01.08.2018

comment

я запускаю ваш фрагмент, и да, я вижу, что заголовок исправлен, но когда я попробовал его в своем коде, заголовок не изменился, он все тот же, кстати, я использую начальную загрузку дизайна материалов - ace; 01.08.2018

comment

что вы имеете в виду, когда говорите модель прокрутки? - ace; 01.08.2018

comment

прокручивать только модель, а не страницу - לבני מלכה; 01.08.2018

comment

Можете ли вы показать мне пример? первый у меня не работает - ace; 01.08.2018

arrow_upward
0
arrow_downward

Замените свой модальный контент div на:

<div class="modal-content py-0" style="max-height: 100%; overflow-y: auto;">...</div>

Ali Nazim Boukabous 13.02.2021

comment

Привет! Добро пожаловать в StackOverflow. Пожалуйста, добавьте некоторое объяснение, почему это отвечает на вопрос ОП. Что это меняет? Как это решает заданный вопрос? - milo526; 13.02.2021

Боковой модальный полноразмерный заголовок, тело и нижний колонтитул не равны

Ответы (2)

Похожие вопросы