Community
cancel
Showing results for 
Search instead for 
Did you mean: 
Robert_C_6
New Contributor I
4,464 Views

iframe not showing up with correct height

Jump to solution

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%;
}

 

 

Tags (2)
0 Kudos
1 Solution
Robert_C_6
New Contributor I
4,464 Views

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!

View solution in original post

5 Replies
PaulF_IntelCorp
Employee
4,464 Views

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
Valued Contributor I
4,464 Views

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
New Contributor I
4,464 Views

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

PaulF_IntelCorp
Employee
4,464 Views

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
New Contributor I
4,465 Views

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!

View solution in original post

Reply