Hide footer when keyboard appear


#21

@theyouishere. Did you get solution for this?


#22

Nop. I didn’t look back at it. I keep all that kind of stuff for the end of my app when all the backend/front-end will be done. but it’s definitely something that i gotta fix so if you find it, just let me know !


#23

Same here. This solution worked for me! Tks.


#24
  1. Declare a document variable like this:-

    declare var document:any;
    
  2. Subscribe for keyboard show and hide events using native keybaord plugin like this:-

    Keyboard.onKeyboardShow().subscribe( (value)=>{
    document.body.classList.add(‘hide-on-keyboard-open’);
    }

    Keyboard.onKeyboardHide().subscribe( (value)=>{
    document.body.classList.remove(‘hide-on-keyboard-open’);
    }

  3. Add css :-

    body.hide-on-keyboard-open .scroll-content{
    margin-bottom: 0px !important;
    }
    body.hide-on-keyboard-open .footer{
    display: none;
    }

THATS IT, YOU’RE GOOD TO GO
THIS WORKS PERFECT 100%.


#25

found this solution (hope it helps): https://stackoverflow.com/questions/32730171/ionic-footer-input-field-being-hidden-by-keyboard-in-chat-app

This goes out out to anyone that’s had a similar problem with the ionic footer and inputs in cordova build. If you have this preference in config.xml

Set preference “fullscreen” to value “false”

The keyboard will hide the input when it’s activated. If you absolutely need to see that input when typing (that was a joke) than just set it to false and it should solve the problem.


#26

Thank you very much. Superb idea