CODEWITHSUNDEEP
ioscssangularionic-framework
Andra Zeberga
Andra Zeberga

Reputation: 227

On-screen keyboard covers fixed position input in ionic

I am trying to build a simple messaging view in ionic. My view looks as follows:

Initial screenshot

My problem is when I focus the input on iOs, the keyboard covers the input, however on an Android device, the input moved along with the appearing keyboard as expected.

My understanding that if I use position: fixed and indicate bottom value (say, bottom: 16px) the input should appear 16px above the page fold both when the keyboard is open and when it isn't.

For reference, this is the result I get when I try to focus the input on an actual iOs device.

On-screen keyboard covers up input

Upvotes: 2

Views: 2614

Answers (1)

Emilio Maciel
Emilio Maciel

Reputation: 213

I had this problem with ion-textarea. I'm using ionic 4 beta 17 - ionic keyboard 2.1.3 I am still not using native keyboard, but maybe will try. What I did is hookup the keyboardDidShow event and scrolled the active document into view. Look at this code:

ngOnInit() {
  window.addEventListener('keyboardDidShow', () => {
    const el = document.getElementById('myElement'); 
//myElement would be the input you have. Or you can just scroll into view the active element, like
// document.activeElement.scrollIntoView();
    if (document.activeElement === el)
      el.scrollIntoView();
  });
}

Upvotes: 2

Related Questions