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?
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.
Thanks I tried it, Still am facing the issue . 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 ?
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.