vh / % units and keyboard on mobile devices

Question

I have problem with units like vh / % for heights. When any input is active, keyboard on mobile devices change elements height. I'm looking for solution to change it to static height when keyboard is active.

jsfiddle (open on mobile device)

Answer 1

The issue is quite straightfoward, we've all experienced it before.

Luckily I rarely work on websites that have elements that need to fit perfectly based on the viewport sizes, however when I do, I prefer to use a jQuery solution to achieve this.

I am going to go out on a limb and assume that you only need to apply this type of rule on mobile, so am going to add this to the code.

jQuery(document).ready(function($){ //wait for the DOM to load
    if($(window).width() > 640) { //check if screen width is less than 640px (i.e. mobile)
        $('#my-element').css({ 'height' : $(window).height() }); 
    }
});

It is possible to edit the height directly by changing the action to:

$('#my-element').height($(window).height()); 

but we specifically want to overwrite your CSS rule that stated something along the lines of:

#my-element { height: 100vh; }

I've edited your codepen to include my example.