2

Please have a look at this issue. I have full one-page simple html code to reproduce it. There are two modals - one on top, and one lower on the page. Input fields inside the modals. If you tap on input field, it scrolls to the very bottom so that I cannot see the input field. This issue occurs only with the bottom modal, not the top one. Using CHROME on ANDROID

Here's the code:

  
<!doctype html>
<html lang="en">
<head>
  
<meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <title>Hello, world!</title>
    
    
    
</head>

<body>
      <h4>Hey</h4>
    
      <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal1">
  Open modal
</button>

<!-- The Modal -->
<div class="modal" id="myModal1">
  <div class="modal-dialog">
    <div class="modal-content">

      <!-- Modal Header -->
      <div class="modal-header">
        <h4 class="modal-title">Modal Heading</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>

      <!-- Modal body -->
      <div class="modal-body">
        Modal body..
           <p>input</p>
        <input type="text">
          <p>input</p>
        <input type="text">
           <p>input</p>
        <input type="text">
           <p>input</p>
        <input type="text">
           <p>input</p>
        <input type="text">
           <p>input</p>
        <input type="text">
           <p>input</p>
        <input type="text">
      </div>

      <!-- Modal footer -->
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
      </div>

    </div>
  </div>
    </div>
    <div style="height:1000px;"></div>
    <div style="height:1000px;"></div>
    
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal2">
  Open modal
</button>

<!-- The Modal -->
<div class="modal" id="myModal2">
  <div class="modal-dialog">
    <div class="modal-content">

      <!-- Modal Header -->
      <div class="modal-header">
        <h4 class="modal-title">Modal Heading</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>

      <!-- Modal body -->
      <div class="modal-body">
        Modal body..
        <p>input</p>
        <input type="text">
          <p>input</p>
        <input type="text">
           <p>input</p>
        <input type="text">
           <p>input</p>
        <input type="text">
           <p>input</p>
        <input type="text">
           <p>input</p>
        <input type="text">
           <p>input</p>
        <input type="text">
      </div>

      <!-- Modal footer -->
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
      </div>

    </div>
  </div>
    </div>


    
    
     <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
 
  </body>
</html>

this is what happens when you tap on input field

Akber Iqbal
  • 14,487
  • 12
  • 48
  • 70
Alik Fomin
  • 41
  • 4

1 Answers1

5

I had a similar issue and this is what fixed it for me (after hours of frustration and a lot of googling...)

Specifically I was using a bootstrap-vue modal with a text input and on focus/tap of the input field Android chrome would scroll to the bottom of the modal, if i scrolled back up and typed it stayed in focus but tapping again it would scroll again back to same spot.

Here's what worked:

html,body{
    -webkit-overflow-scrolling : touch !important;
    overflow: auto !important;
}

Original Credit to: https://stackoverflow.com/a/35675094/1625130

hurlbz
  • 383
  • 3
  • 16