Problems with Webview width on iPhone with an iframe

You must Login before you can answer or comment on any questions.

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:

Webview:

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

iframe:

<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>

Things to notice:

This only happens on portrait. It works fine on the iPad or on the iPhone with landscape view.
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.
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.

Any thought?

Your Answer

Think you can help? Login to answer this question!