iframe not showing up with correct height

[Robert_C_6]

Hi,

I am currently building a web app and I am importing a iframe of my website into the app. All works great except for the height does not show up correctly when I build and deploy my app on an android 5 or 6 device.

This is odd to me because it shows up correctly in the simulator but not in the built app...

code for iframe and css

 <div id="main-div">
<iframe src="http://robbotdev.com" style="width: 100%; padding: 0px; height: 100%; margin: 0; border: none; display: block; overflow: hidden;"></iframe>
</div>

iframe {
    max-height: 100%;
    max-width: 100%;
    width: 100%;
    height: 100%;
}

#main-div {
    height:100%;
}

[PaulF_IntelCorp]

I would search the web for something like "specifying iframe size in cordova phonegap app" to find some useful information. The XDK creates a standard Cordova app, so solutions for Cordova (aka PhoneGap) apps will also work in your XDK app.

[Diego_Calp]

Hi Robert,

Try using vh and vw units instead of %.

https://snook.ca/archives/html_and_css/vm-vh-units

Regards,

Diego

[Robert_C_6]

That would work but I am getting the error " value 100vh not supported"

[PaulF_IntelCorp]

Robert -- you're probably getting that from an Android 4.x device, because the built-in webviews on those devices are quite old and do not support many modern HTML5 features. You'll have to build with Crosswalk to get a modern set of features on Android 4.x devices. For Android 5+ the feature set is up-to-date.

[Robert_C_6 · Accepted solution]

I actually answered my own question, Because of the new HTML Doctype not auto setting the html and body height to 100% I was having the height issue.

The solution was to set both the body and html height in app.css to 100%

Thanks to all who answered!