Открытие и закрытие модема начальной загрузки изменить размер моего контента - PullRequest
Новая
       25

Открытие и закрытие модема начальной загрузки изменить размер моего контента

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

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

Также обратитесь к этому изображению. Модальное всплывающее окно . Всякий раз, когда я открываю свой модал, полоса прокрутки главной страницы исчезает.

HTML-код приведен ниже: 

{% extends "base.html" %}
{% block body %}
<section class="content-header">
  <div class="row">
    <div class="box-header with-border">
        <h3 class="box-title"><strong>Monthly Recap Report</strong></h3>
        <div class="box-tools pull-right">
          <div class="btn-group">
            <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal--slideSpeedRight"><i class="fa fa-filter"></i></button>

            <!-- Modal -->
            <div class="modal fade" id="myModal--slideSpeedRight" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
              <div class="modal-dialog modal-lg">

                <!-- Modal content-->
                <div class="modal-content">
                  <div class="modal-header">
                    <h4><strong>Filter</strong></h4>
                  </div>
                  <div class="modal-body">
                    <!-- content  -->
                  </div>
                  <div class="modal-footer">
                    <button class="btn btn-primary">Apply</button>
                    <button class="btn btn-primary" data-dismiss="modal">Close</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
    </div>
  </div>
</section>
{% endblock %}

Я попытался добавить 

.modal-open{
  padding-right: 0 !important;
  overflow-y: auto;
 }

Но это не работает. Пожалуйста, помогите мне решить эту проблему

Спасибо

...