Layout of html elements with enabled keyboard

Question

Is it possible to create an html element (let's say div) which will have responsive height and will be covered by enabled keyboard?

I have following situation:

And I'd want to have this div to be scrollable like that

I know I could do that by setting height of div to specifix px value but I'd want it to look the same on different mobile devices. I've tried to use vh but as I understand it corresponds to viewport height which is different with enabled keyboard. Is it possible to make viewport sizes not changable?

score 0 · Accepted Answer · answered Dec 18 '18 at 21:34

0

No. The virtual keyboard is not HTML and is not in the DOM -- it's an operating-system level component and your page doesn't even know it exists.

Managing application layout is very difficult with the virtual keyboard unless you're building a native app. In that case the app can control the visibility of the keyboard and adjust its layout accordingly. On a normal web page this is virtually impossible.

answered Dec 18 '18 at 21:34

Diodeus - James MacFarlane

112,730
33
157
176

Couldn't you detect page resize via jQuery (https://stackoverflow.com/a/28272408/3684265) and then just use jQuery to addClass/removeClass? – imvain2 Dec 18 '18 at 21:36
Damn, that's weird there is no such functionality. So everyone just managing it manually for each device separately? – kebie Dec 18 '18 at 21:39
Implementation varies from browser to browser. There is no reliable way to deal with this. – Diodeus - James MacFarlane Dec 18 '18 at 21:39
@imvain2 yea I thought about that but it seemed a bit too complicated, I was sure there should be some mechanism to automagically set it. – kebie Dec 18 '18 at 21:40
I literally spent weeks trying to solve this, and ended up going with hybrid app strategy. – Diodeus - James MacFarlane Dec 18 '18 at 21:41
That's why we get paid da big bucks :) – Diodeus - James MacFarlane Dec 18 '18 at 21:45
Haha, true that :) – kebie Dec 18 '18 at 21:45

Layout of html elements with enabled keyboard

1 Answers1