Bootstrap модал с iframe не позволяет вертикальную прокрутку только на iPhone - PullRequest
Новая
       50

Bootstrap модал с iframe не позволяет вертикальную прокрутку только на iPhone

0 голосов
/ 11 октября 2018

Я модал начальной загрузки на странице с iFrame, с формой в iframe, которая является большой.Я не могу прокрутить эту форму вертикально в браузерах iPhone.Я перепроверил то же самое на телефоне Android, и я могу прокрутить внизНо с iphone, кажется, есть какая-то проблема.

Не уверен, что может быть проблема 

<div class="modal fade" id="modalLoginForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog model-bookingform" role="document">
    <div class="modal-content">
      <div class="modal-header text-center" style="position:absolute; right:0px; z-index:999; padding:0px;">
        @*<h4 class="modal-title w-100 font-weight-bold">Form</h4>*@
        <button type="button" class="close btn-model-close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="embed-responsive embed-responsive-16by9 z-depth-1-half bookingformiframe-w">
        <iframe id="iframex" class="embed-responsive-item" style="overflow:auto;" src="https://example.com/largeform"></iframe>
      </div>
    </div>
  </div>
</div>

CSS

Я даже добавил дополнительные CSS без решения, когда япопробуйте прокрутить, а не прокручивать содержимое iframe, которое кажется для прокрутки страницы 

@media (max-width:800px) {
  #modalLoginForm {
    overflow: scroll;
    z-index: 999999 !important;
  }

  iframex {
    overflow: scroll !important;
    z-index: 9999999 !important;
  }
}

.modal {
  overflow-y: auto !important;
}

.modal-open .modal {
  overflow-x: auto !important;
  overflow-y: auto !important;
}

Ответы [ 2 ]

0 голосов
/ 11 октября 2018

Как временное исправление, работающее после, проблема, кажется, с iPhone, так как он отлично работает на других мобильных устройствах 

.embed-responsive-16by9 {
    padding-bottom: 0% !important;
    height:1100px !important;
}
0 голосов
/ 11 октября 2018

Это может быть проблема с прокруткой в ​​Safari.Попробуйте добавить свойство -webkit-overflow-scrolling: touch; в оболочку iframe, например: 

.embed-responsive {
  -webkit-overflow-scrolling: touch;
}

Надеюсь, что эта помощь

...