bootstrap modal scrolls too much when soft keyboard opens

Question

I've searched this question but all I could find was something else. I have a form as a bootstrap 4 modal. When I open it from mobile and tap on an input field, it scrolls down so that the soft keyboard is below the whole modal. It scrolls all the way down, instead of scrolling a little. Whichever input I tap on, it scrolls down so hard, I can only see "submit" and "close" buttons.

      <div class="portfolio-modal modal fade" id="contactModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="close-modal" data-dismiss="modal">
          <div class="lr">
            <div class="rl"></div>
          </div>
        </div>


              <div class="modal-body">
                <!-- Project Details Go Here -->

    <div class="container">

<div class="col-lg-12 text-center">
          <h2>Напишите нам!</h2>
          <h3 class="section-subheading text-muted">Оставьте Ваши контактные данные и пожелания, чтобы мы подобрали для Вас оптимальное путешествие.</h3>
</div>
<div class="row">
   <div id="contact-form">        
   <div class="controls">
                 <div class="col-12">
                 <div class="form-group">
                   <label for="mod_form_name">Ваше имя *</label>
                   <input id="mod_form_name" type="text" class="form-control" required="" placeholder="Как к Вам обращаться?">
                   <div class="help-block with-errors"></div>
                 </div>
                 </div>
                 <div class="col-12">
                 <div class="form-group">
                   <label for="mod_form_tel">Ваш телефон *</label>
                    <input id="mod_form_tel" type="text" class="form-control" required="" placeholder="Введите Ваш телефон">
                   <div class="help-block with-errors"></div>
                 </div>
                 </div>
                 <div class="col-12">
                 <div class="form-group">
                   <label for="mod_form_email">Ваш Email </label>
                    <input id="mod_form_email" type="email" class="form-control" placeholder="Введите Ваш Email" data-error="Требуется действующее электронное письмо.">
                   <div class="help-block with-errors"></div>
                 </div>
                 </div>
                 <div class="col-md-12">
                 <div class="form-group">
                     <label for="mod_form_message">Ваше сообщение: </label>
                    <textarea id="mod_form_message" name="text_comment" class="form-control" placeholder="Пожалуйста, оставьте сообщение" rows="4" required="" data-error="Пожалуйста, оставьте нам сообщение."></textarea>
                   <div class="help-block with-errors"></div>
                 </div>
                 <div class="mod_messages"></div>
               </div>          
               <div class="col-md-12 text-center">
                  <input  class="btn btn-primary" type="submit" name="btn_submit" id="button_modalcontacts" value="Отправить сообщение">
               </div>
                 <button class="btn mx-auto" data-dismiss="modal" type="button">
                  <i class="fas fa-times"></i>
                  Закрыть</button>
</div> </div> </div> </div> </div> </div>  </div>  </div>

Here're some screenshots. Before I tap: this is what the modal looks like as soon as I tap after I tap, it's scrolled below the modal

the behavior is not normal I believe

I will be very grateful for any help for I'm just learning.

UPDATE: Experiment has shown, if a button that triggers the modal is on top of the page, modal doesn't scroll like that. If the button is somewhere lower on the page, it scrolls dramatically. Please let me know if you have any ideas what I should do.

to verify if this is normal behavior, check this page on your mobile to see the effect that takes place... https://www.w3schools.com/bootstrap4/bootstrap_modal.asp — Akber Iqbal, Nov 20 '19 at 07:54
I've added an input to their example, tried it, and it worked normal on my device, scrolled perfectly. — Alik Fomin, Nov 20 '19 at 19:27
@AkberIqbal Experimentally found out it works OK if modal trigger button is on top of the page, but if it's closer to bottom, the scroll happens. I need buttons not just on top obviously... Let me know if you have any ideas. — Alik Fomin, Nov 21 '19 at 18:12
if you can add complete working code which replicates your issue, it'll be easier to help — Akber Iqbal, Nov 21 '19 at 20:34
@AkberIqbal I have posted a new question with clarified issue and full code, feel free to have a look https://stackoverflow.com/questions/59007108/if-bootstrap4-modals-located-low-on-the-page-when-tap-on-input-field-inside-the — Alik Fomin, Nov 23 '19 at 11:43

score 2 · Answer 1 · answered Sep 24 '21 at 06:42

2

Found another question with a similar problem. Since I had the same problem I came across both questions.

The solution was to set overflow to auto on the body, as described in the answer.

html, body {
    overflow: auto;
}

answered Sep 24 '21 at 06:42

Lars

375
2
5
11

score 1 · Answer 2 · answered Nov 13 '20 at 07:38

This issue can be resolved by using the scroll event.Code given below.

window.addEventListener("scroll", function () {
    scroll_y = this.scrollY;
});

While clicking the button which trigger's the modal popup, store the scroll_y position to another variable name. For example: position_y = scroll_y;

And then set the page scroll to 0 like this inside the click event.

$('html, body').scrollTop(0);

Once the modal popup close event triggers, then set the page scroll with position_y like this.

$('html, body').scrollTop(position_y);

It surely works fine.

bootstrap modal scrolls too much when soft keyboard opens

2 Answers2