1

We have a webpage with fixed header and footer and scrollable content.

It has 20 text boxes. The ones at the bottom e.g. Zip, Telephone are obscured by the iOS virtual keyboard that pops up on text box focus.

If I detect that the user has a device with a virtual keyboard I could add half a screen padding to the bottom text box so that the user can scroll down and the virtual keyboard doesn’t obscure it.

Is this the normal way to handle it and if so is there a JavaScript/css way to detect if the device is going to pop up a virtual keyboard? Or since it’s an aspx page should we try and detect it serverside?

screen mockup

Jeroen Vannevel
  • 43,651
  • 22
  • 107
  • 170
user1946932
  • 474
  • 1
  • 16
  • 41

3 Answers3

1

Actually iOS seems now not to have that issue — rather it pushed the bottom up rather than popping over. I’m not sure why it occurred before.

user1946932
  • 474
  • 1
  • 16
  • 41
1

Adding padding would certainly be effective though it may slightly deteriorate the quality of your webpage. However, if it is a recurring issue that needs immediate action, I would suggest padding.

This question on StackOverflow should be very helpful to you: Move a view up only when the keyboard covers an input field

Voldemort's Wrath
  • 83
  • 2
  • 18
0

Ya Usually you should add padding, then it would go up and be more user friendly. I think that's a good idea. I think it's normal.