I am setting the width and height of a div
as a proportion of the viewport width and height respectively in a Ionic app. This works pretty fine on the explorer on my computer and on a device with Android 4.4. However, this propperty seems to have no effect on Android 4.2 (the height is limited to the text height). If I replace vh
by %
it keeps working on v4.4 but still not on v4.2.
Here is my code
HTML
<body ng-app="starter">
<ion-pane>
<ion-content ng-controller="langController">
...
<div id="language-selector" class="row">
<h2>Idioma</h2>
</div>
...
</ion-content>
</ion-pane>
</body>
CSS
#language-selector{
height: 10vh !important;
padding: 0;
background-color: #d1d3d4;
}
How can I make this work on Android v4.2?
Thank you in advance for your help.
There was a similar question to this issue and the only solution seems to write a JS function to update the height for Android <4.4.
See also at CanIUse.
One JavaScript solution could be:
// set initial height
document.getElementById("myDiv").style.height = (window.innerHeight / 10) + "px";
// change height on every resize event
window.onresize = function () {
document.getElementById("myDiv").style.height = (window.innerHeight / 10) + "px";
}
Try it out and resize the window height: http://jsfiddle.net/3eb68vf2/1/