CODEWITHSUNDEEP
htmlcssangularjsionic-framework
Muhsin Keloth
Muhsin Keloth

Reputation: 7954

Hide footer when keyboard appear ionic

I am facing an issue with the footer-bar in a particular page.when an input is focused the keyboard appear and the footer stay above the keyboard.

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>

I have tried to resolve this issue by adding the below line in app.js. After the footer is hiding,But there is a flickering issue.Is there any other way to hide the footer when the keyboard appear? Please help me.Thanks.

Thanks

Upvotes: 0

Views: 3296

Answers (2)

Simon Sch&#252;pbach
Simon Sch&#252;pbach

Reputation: 2683

There is the class "hide-on-keyboard-open" you can use for such things

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

Take a look at ionic keyboard plugin

Upvotes: 2

qchap
qchap

Reputation: 345

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

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

you can try this (on run() ). You'll just add the correct css rule and it should be ok.

Upvotes: 1

Related Questions