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; 
     }