工具欄跟進後鍵盤出現在材質

Question

如何讓工具欄保持在最下方，不要在鍵盤出現後頂上？ 我的代碼有什麼問題，或者更少一些cordova或framework7的插件！也許有人可以幫我解決這個問題。

<div class="views"> 
 
    <div class="view"> 
 
     <div class="pages"> 
 
    <div data-page="viewprofil" class="page navbar-fixed toolbar-fixed"> 
 
     <div class="navbar" style="background-color: #1abc9c;box-shadow: 0 5px 10px rgba(0,0,0,0.1), 0 3px 6px rgba(0,0,0,0.1);"> 
 
      <div class="navbar-inner" > 
 
       <div id="kembali" class="left sliding button"> 
 
       <i class="icon icon-back"></i> 
 
       </div> 
 
       <div class="left sliding">Akun</div> 
 
      </div> 
 
     </div> 
 

 
     <div class="toolbar toolbar-bottom"> 
 
     <div class="toolbar-inner"> 
 
      <a id="kembali"> 
 
       <i class="fa fa-home fa-2x" aria-hidden="true"></i> 
 
      </a> 
 
      <a href="{{pathFor 'history'}}" > 
 
       <i class="fa fa-clock-o fa-2x"></i> 
 
      </a> 
 
      <a href="{{pathFor 'viewprofil'}}" class="toolbar-aktif"> 
 
       <i class="fa fa-user fa-2x"></i> 
 
      </a> 
 
     </div> 
 
     </div> 
 

 
    <div class="page-content" style="background-color: #ecf0f1;color: #444444;"> 
 
    <div class="content-block-title" style="top: 0px; margin-top:0px;"><h2>Pengaturan Akun</h2></div> 
 
    <div class="list-block"> 
 
     <ul class="box-data"> 
 
     <li> 
 
      <div class="item-content"> 
 
      <div class="item-media"><i class="icon material-icons">person</i></div> 
 
      <div class="item-inner"> 
 

 
       <div class="item-input"> 
 
       <input id="namalengkap" type="text" placeholder="Nama lengkap" value="{{nama}}"> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </li> 
 
     <li> 
 
      <div class="item-content"> 
 
      <div class="item-media"><i class="icon material-icons">email</i></div> 
 
      <div class="item-inner"> 
 

 
       <div class="item-input"> 
 
       <input type="text" value="{{email}}" disabled> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </li> 
 
     <li> 
 
      <li class="accordion-item"> 
 
      <a class="item-content item-link"> 
 
       <div class="item-media"><i class="icon material-icons" aria-hidden="true">lock</i></div> 
 
       <div class="item-inner"> 
 
       <div class="item-title">Kata Sandi</div> 
 
       </div> 
 
      </a> 
 
      <div class="accordion-item-content"> 
 
       <div class="content-block" style="margin-left: 80px;"> 
 
       <input type="password" placeholder="Kata Sandi baru"> 
 
       </div> 
 
       <div class="content-block" style="margin-left: 80px;"> 
 
       <input type="password" placeholder="Ulangi Kata Sandi"> 
 
       </div> 
 
      </div> 
 
      </li> 
 
     </li> 
 

 
     <li> 
 
      <div class="item-content"> 
 
      <div class="item-media"><i class="icon material-icons">call</i></div> 
 
      <div class="item-inner"> 
 
       <div class="item-input"> 
 
       <input type="tel" placeholder="No. Handphone" value="{{notelp}}"> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </li> 
 

 
     </ul> 
 
     <div class="content-block"> 
 
     <div class="logButton button button-fill button-raised color-red" id="logout" ><i class="fa fa-power-off " aria-hidden="true"></i>&nbsp;Keluar</div> 
 
     </div> 
 
    </div> 
 
    </div> 
 

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

After

Before

Answer 1

我再也沒有出來一個主意，以保持它在底部，但這裏是一個快速解決方案：

var myApp = new Framework7({ 
    material: true 
}); 

var mainView = myApp.addView('.view-main', { 
}); 

$$ = Dom7; 

$$('#my-input').on('focus', function() { 
    mainView.hideToolbar(); 
}); 

$$('#my-input').on('blur', function() { 
    mainView.showToolbar(); 
}); 

簡單在輸入焦點和模糊事件上顯示和隱藏工具欄。

現場示例：https://jsfiddle.net/wowq3n64/