IFrame Fills Area on PhoneGap instead of Fixed Position

My app works perfectly fine in the browser.

What I do is I show and hide this iFrame using a checkbox.
However when I released it for android, the new iFrame I added fills the entire page instead of having it's fixed position which I stated in CSS.

I'm converting my app to an Android app using PhoneGap Build.
My app uses the following permissions.

<preference name="permissions" value="none"/> <preference name="orientation" value="default"/> <preference name="target-device" value="universal"/> <preference name="webviewbounce" value="false"/> <preference name="prerendered-icon" value="true"/> <preference name="stay-in-webview" value="false"/> <preference name="ios-statusbarstyle" value="black-opaque"/>  <gap:plugin name="org.apache.cordova.file"/> <gap:plugin name="org.apache.cordova.file-transfer"/> <gap:plugin name="org.apache.cordova.inappbrowser"/> <gap:plugin name="org.apache.cordova.network-information"/>  <access origin="*"/> <plugin name="cordova-plugin-whitelist" version="1"/>  <preference name="phonegap-version" value="cli-5.2.0" /> <preference name="android-minSdkVersion" value="7" /> <preference name="android-targetSdkVersion" value="19" /> <preference name="AndroidPersistentFileLocation" value="Compatibility" /> 

Can someone explain why my app fills the page and does anyone know of a way to solve this problem?

1 Answers

Answers 1

EDIT:
I was able to fix the problem two different ways.
I merged the html of that page into my main app and merged the script into my main script. I also fixed it using the .load JQuery API.

Even though I was able to solve my problem here I still don't understand why the iFrame filled the entire page.

If You Enjoyed This, Take 5 Seconds To Share It

• Facebook
• Twitter
• Google+
• StumbleUpon
• Digg
• Delicious
• LinkedIn
• Reddit
• Technorati