Android - Keyboard hiding the input field


#1

Am loading an external URL in an iframe. I have 4~5 text fields in that page. For most of the text field, when I tap on it, the keyboard appears and the text field is visible.
But when I tap on the last text field or the 4th one, the keyboard appears and am not able to see the text field. The keyboard is overlapping it. All I could do is, scroll the page a bit and I could see the text field. This is happening only in android.

I have tried adding android:windowSoftInput mode property,fullscreen to false in config.xml. None of them worked. Any idea to fix these?

Note : Am loading an external page in iFrame.


#2

with Keyboard plugin :

cordova.plugins.Keyboard.disableScroll(false)

might help


#3

I don’t want to disable scroll. I want the page to automatically scroll up like they are doing for the rest of the text field.


#4

Yeah, but disableScroll might be set to true by default in your app.js, which could cause the issue


#5

My bad. Yeah. I have set it to false. But still am facing the issue.
The strange thing is, when I click on the last text field(first time), the page scrolls a bit, keyboard overlaps text field. Second time(without doing anything in the page), dismiss the keyboard which was open @ first time, click the text field, now the text visible i.e above the keyboard.


#6

Maybe try to add

overflow-scroll=true or scroll=true

In your ion-content.


#7

Thanks I tried it, Still am facing the issue :frowning: . I checked the CSS properties for the both the cases (the one which scrolls up properly and the other one which is hiding the text field). Both are same.
Is there any way we could set the focused text field just above the keyboard or any css properties would help ?


#8

You could try with keyboard-attach directive.
But it only works inside ion-footer-bar.

What also worked for me, was manual scroll on native.keyboardshow and native.keyboardhide event. When event fires it also gives you keyboard hight, so you can calculate the amount of scroll.
Here you can find event example.