Mobile UI issue - keyboard overlapping with widget

[jmfield2]

Summary:

This issue is to determine a solution to better address keyboard layout on mobile devices in portrait mode. On some devices, the keyboard will overlap controls in the widget forcing the user to close the keyboard in order to see the widget and complete their task (such as planning a trip).

From @jailby

I wanted to let you know of an issue I noticed on maps.usf.edu, yesterday.
Someone asked me where was the ISA building so I was happy to show him maps.usf.edu.
However, there was an error message stating "please select an start and end to your trip" (or something similar).
It happened when selecting "my location" as the start point and ISA as the end point. I just checked again and had the same problem. I would think it come from the "my location", since when selecting it, there is no marker appearing on the map (if I remember correctly it used to).
Also, one UI issue: on his phone the keyboard was overlapping the "plan your trip" button in the widget trip planner. I think it is not really intuitive that he had to close his keyboard to plan his trip.

Related to #383

Steps to reproduce:

On a small mobile device in portrait mode, click to focus on a text box (start, end) and observe the how the keyboard is shown.

Expected behavior:

The keyboard won't interfere with the rest of the webapp.

One possibility is to utilize the widget scrollbar when the keyboard is active so that the widget can at least be scrolled while the keyboard is open and no elements overlap.

Observed behavior:

The keyboard interfered with the the trip planner widget. Forcing the user to close the keyboard to switch fields during a trip plan is tedious and counter-intuitive.

Platform:

Mobile, Android, Chrome, Portrait orientation