23472

Appcelerator: Webview on iPhone with an iFrame and width

Question:

Good evening,

I've been having some issues with a view that has a webview inside. The webview is inserting an iframe with an external source (an html on another domain). I'm using an iframe since I need to use the external HTML and I need to communicate with click/touch events with my application.

The main issue is that the webview is inserting unwanted horizontal scroll bars (because the iframe content is too big)

The code looks like:

<strong>Webview:</strong>

var webview = Titanium.UI.createWebView({ url: "/html/local.html", width:Ti.UI.SIZE, height:Ti.UI.SIZE, contentWidth:Ti.UI.SIZE, contentHeight:Ti.UI.SIZE, disableBounce:true, enableZoomControls: false }); self.add(webview);

<strong>iframe:</strong>

<html> <head> <meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/> <meta http-equiv="cleartype" content="on"> <script> function init () { window.theIframe.TiAPI = Ti.API; window.theIframe.TiApp = Ti.App; } </script> <style> body {width:100%;margin:0;padding:0;background-color:#ccffff;} </style> </head> <body> <iframe name="theIframe" src="http://external.com/something.html" width="100%" height="100%" frameborder="0" onload="init()"> </iframe> </body> </html>

<strong>Things to notice:</strong>

<ul><li>This only happens on portrait. It works fine on the iPad or on the iPhone with landscape view.</li> <li>If, under the external html, I set the max-width for the body to 320px it works perfectly. I won't make it this way because I need it to work under landscape and iPad.</li> <li>If I use the external html as the URL for the webview, it works too. So it's not an issue with the external content, but with the local html or the webview and the iframe.</li> </ul>

Any thought?

Answer1:

Maybe in the local HTML file you could turn scrolling off for the iframe. <a href="http://www.w3schools.com/tags/att_iframe_scrolling.asp" rel="nofollow">http://www.w3schools.com/tags/att_iframe_scrolling.asp</a>

For example:

<html> <head> </head> <body> <iframe src="http://www.yahoo.com.au" scrolling="no"></iframe> </body>

Answer2:

I also came across the <a href="https://stackoverflow.com/questions/20123960/how-to-get-iframe-width-100-in-iphone-portrait-view" rel="nofollow">same problem</a> and actually managed to find a solution <br />

I have no idea why this happens in the first place, but if you want the actual container width on the iframe use this CSS instead:

iframe { min-width: 100%; width: 100px; *width: 100%; }

Answer3:

I ended using media queries on the external file and that works pretty well.

Answer4:

It is answered here: <a href="https://stackoverflow.com/questions/16937070/iframe-size-with-css-on-ios" rel="nofollow">iframe size with CSS on iOS</a>

Simply wrap your iframe in a div with:

overflow: auto; -webkit-overflow-scrolling:touch;

<a href="http://jsfiddle.net/R3PKB/7/" rel="nofollow">http://jsfiddle.net/R3PKB/7/</a>

Recommend

  • Rails: Converting from MySQL to PostGres breaks Geokit Distance Calculations?
  • Python object matching using string
  • MultiLevel ExpandableListView not highlighting properly
  • jQuery - resize an elements height to match window without refreshing, on window resize
  • using html data-attributes as css-variable (i.e. text-shadow)
  • Drawing a Path in XAML (with binding) vs. C#. One works, one doesn't
  • chrome video src change not working
  • WPF Template Binding in ToggleButton UserControl
  • WPF version of .ScaleControl?
  • blade.php method outputting it's result to the form
  • Tell Git to stop prompting me for conflicts when none really exist?
  • D3 get axis values on zoom event
  • OpenGL 3.3 on Mac OSX El Capitan with LWJGL
  • Jquery UI tool tip close icon
  • Display issues when we change from one jquery mobile page to another in firefox
  • How to show dropdown in excel using jrxml (jasper api)?
  • NSLayoutConstraint that would pin a view to the bottom edge of a superview
  • How get height of the a view with gone visibility and height defined as wrap_content in xml?
  • Angular 2 constructor injection vs direct access
  • Java static initializers and reflection
  • embed rChart in Markdown
  • How to stop GridView from loading again when I press back button?
  • Android Google Maps API OnLocationChanged only called once
  • How to get Windows thread pool to call class member function?
  • IndexOutOfRangeException on multidimensional array despite using GetLength check
  • Bitwise OR returns boolean when one of operands is nil
  • python draw pie shapes with colour filled
  • sending mail using smtp is too slow
  • XCode 8, some methods disappeared ? ex: layoutAttributesClass() -> AnyClass
  • Easiest way to encapsulate a HTML5 webpage into an android app?
  • Busy indicator not showing up in wpf window [duplicate]
  • costura.fody for a dll that references another dll
  • Why is Django giving me: 'first_name' is an invalid keyword argument for this function?
  • Binding checkboxes to object values in AngularJs
  • Observable and ngFor in Angular 2
  • How to Embed XSL into XML
  • How can I use `wmic` in a Windows PE script?
  • UserPrincipal.Current returns apppool on IIS
  • Conditional In-Line CSS for IE and Others?
  • java string with new operator and a literal