Bootstrap 3输入问题。键盘在Android上重叠输入字段

Question

我在我的页面上使用简单模式，使用默认引导程序3样式。

<div class="modal fade"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
       <div class="modal-body"> 
       <form class="form-horizontal"> 
         <p>Simple form</p> 
         <div class="form-group"> 
          <label for="input1"><span">Old pass</span></label> 
          <input type="password" id="input1" maxlength="20"> 
         </div> 
         <div class="form-group"> 
          <label for="input2"><span>New pass</span></label> 
          <input type="password" id="input2" maxlength="20"> 
         </div> 
         <button type="button">change pass</button> 
        </form> 
       </div> 
     </div> 
    </div> 

当焦点和键盘输入起来，它的重叠输入字段。有必要滚动窗体来查看输入内容。这不好。
如何更正此表单行为？

Answer 1

尝试将焦点设置为您的输入。这可能会迫使WebView滚动到“可见”视图。

$('.modal').on('shown.bs.modal', function() { 
    $('#input1').focus(); 
}) 

Answer 2

嘿马克我今天正在为此工作，想给我的解决方案。

.modal{ 
    position: sticky; 
    } 

我正在使用MEAN堆栈应用程序，并且我操作的文件是EJS文件，因此您的体验可能会有所不同！希望有所帮助！这里有一些更详细的代码，它可能是风格的组合，但这是大部分的css文件。

html 
    { 
      height: 100%; 
      width: 100%; 
      font-family: 'Roboto Condensed', sans-serif; 
      overflow: auto; 
     } 
     body { 
      padding-top: 100px; 
      height: auto; 
      width: 100%; 
      font-family: 'Roboto Condensed', sans-serif; 
      overflow: auto; 
     } 
     .scrollable{ 
      position: inherit; 
     } 
     .image{ 
      position: fixed; 
      height: 100%; 
      width: 100%; 
      top: 0px; 
      left: 0px; 
      background-image: url("Login-Image.png"); 
      background-repeat: no-repeat; 
      opacity: 0.7; 
      background-size: cover; 
     } 
     .form-container { 
      width: 400px; 
      margin: auto; 
     } 
     .login-style{ 
      position: sticky; 
      z-index: 999; 
      height: 100%; 
      width: 100%; 
      padding-left: 25%; 
      padding-right: 25%; 
      opacity: 1; 
     }