2016-04-14 8 views
0

特定のページでfooter-barの問題に直面しています。入力が集中するとキーボードが現れ、フッターはキーボードの上にとどまります。キーボードがイオン性に見えるときにフッターを表示しない

HTML

<ion-view> 
    <ion-content> 
     <!-- Content goes here --> 
    </ion-content> 
    <div class="bar dash-footer-col dash-footer bar-footer"> 
     <div class="row"> 
      <div class="col dash-footer-col mycharts-footer-col footertopredboarder" <img src="img/icons/1.png" ng-click="go('home')"> 
       <div> 
        <h5>HOME</h5> 
       </div> 
      </div> 
      <div class="col dash-footer-col mycharts-footer-col footer-top-boarder " ng-click="go('profile')"> 
       <img src="img/icons/2.png"> 
       <div> 
        <h5>PROFILE</h5> 
       </div> 
      </div> 
      <div class="col dash-footer-col mycharts-footer-col footer-top-boarder" style="padding-top:0px;" ng-click="go('contact')"> 
       <img class="weather-icon" src="img/icons/3.png"> 
       <div style="height:1em;"> 
        <h5>CONTACT</h5> 
       </div> 
      </div> 
      <div class="col dash-footer-col mycharts-footer-col footer-top-boarder" ng-click="go('logout')"> 
       <img src="img/icons/4.png"> 
       <div> 
        <h5>LOGOUT</h5> 
       </div> 
      </div> 
     </div> 
    </div> 
</ion-view> 

私はapp.jsに以下の行を追加することによってこの問題を解決することを試みました。フッタが隠れてしまった後、ちらつきの問題があります。キーボードが現れたときにフッターを隠す方法はありますか? 助けてください。ありがとうございます。

おかげ

答えて

2

あなたはionic keyboard plugin

を見て、そのようなもののために

<div class="hide-on-keyboard-open"> 

を使用することができます"hide-on-keyboard-open"クラスがあります

1
window.addEventListener('native.keyboardshow', function(){ 
     document.body.classList.add('keyboard-openC'); 
    }); 

window.addEventListener('native.keyboardhide', function(){ 
     document.body.classList.remove('keyboard-openC'); 
    }); 

あなたはこれを試すことができます(実行時に())。正しいCSSルールを追加するだけでOKです。

関連する問題