1

I'm using PhoneGap and JQueryMobile to create a mobile app that I want to deploy to both iOS and Android. The app is simple, and just consists of 3 bars: A header/search bar, a second bar (displays the results of the search), and the remaining screen is a that the user can write in.

Because I want to code my layout to look the same for the greatest # of devices, I've written my CSS for the layout of the app in %'s. Header is 6%, Second bar is 14%, ect. This appears to work decently for the devices I've tested for so far. I ran into an issue where the Android keyboard would squish the viewport height and therefore my layout. So I set the keyboard to resizePan and that solved the squishing issue. However now the bottom of the is not visible until the user closes the keyboard.

In the questions I've seen about that issue, the solution is to swap to "adjustResize" so that the user can scroll when the keyboard is active. I can't do this, because I want to avoid the layout-squish issue.

Is there a way to fix this without having to re-write the CSS? If I HAVE to re-write the CSS, how should I code the layout to look consistent on multiple devices? Do I have to use an extensive list of media queries for all possible devices?

Note: This isn't an issue for ios, because the soft-input keyobard overlays the textarea (like adjustPan) but still allows the user to scroll down and up to parts of the document outside of the view or covered by the keyboard.

Ethan Lie
  • 41
  • 1
  • 2
  • I'm going to point you towards this question: http://stackoverflow.com/questions/25216749/softkeyboard-open-and-close-listener-in-an-activity-in-android. As ultimately you may have to write a native plugin for your phonegap app in Java to detect the keyboard. At which point you can update the height of your over all layout to force it to be able to scroll. Ie. add the height of the keyboard when it is open. – Dave Thomas Oct 02 '15 at 19:41
  • 1
    I think that writing a java plugin that will somehow hook into PhoneGap is beyond my experience at this point. Is there possibly a solution in my problem in re-writing CSS? – Ethan Lie Oct 02 '15 at 21:12
  • Are you able to write JavaScript? I'd suggest listening to the focus and blur events of your text fields. Use that to gauge keyboard opening. When a field is focused make your height 150% roughly to add scrolling. – Dave Thomas Oct 02 '15 at 21:16
  • 1
    That sounds like a good idea, I'll try and give it a shot. Thanks! – Ethan Lie Oct 02 '15 at 22:17
  • Cool if you solve it post your solution to answer your own question. I'll up vote you on it! Cheers – Dave Thomas Oct 03 '15 at 00:17

0 Answers0