CODEWITHSUNDEEP
javascriptandroidhtmlcss
Jona
Jona

Reputation: 51

Virtual Keyboard scales Web Page

This is probably a stupid question but I'm stuck so: I am building a page with a bunch of input fields. These input fields should fill a certain percentage of the screen as the resolution will vary on different devices. Thus I will have styles like these: 

input { height: 20%; }

I would expect it to calculate the height and keep it, but thats not what happens.

looks good until... oh no :O

So my guess is that when the virtual keyboard comes up, it resizes the page and the input fields have 20% of the new height.

After some frustration I created a page with nothing but an input field and checked if I can prevent it from resizing somehow. Heres what did not work:

-setting min-height in percentages

-trying to maintain page height in js

 var initialHeight = document.body.scrollHeight;
        window.onresize = function(event){
            document.body.scrollHeight = initialHeight;
        }

(does that mean percentages are relative to visible sizes only?)

-putting the input field in a div that has a fixed min-height in pixels

A minimum height on the input field itself (in pixels) does seem to work, but it is not the solution I am looking for.

How do I create an input field that will not resize when the virtual keyboard comes up?

Upvotes: 2

Views: 186

Answers (1)

Redwolf
Redwolf

Reputation: 559

Set the height to a fixed value, not a percentage. If you set it to 20% it will be the 20% of the size of it's parent and scale with it's parent, in this case the whole page.

You may want to use the viewport meta tag to scale better on different devices. https://www.w3schools.com/css/css_rwd_viewport.asp

Upvotes: 1

Related Questions