Appcelerator: Webview on iPhone with an iFrame and width

L

4

0

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.SIZE,
    height:Ti.UI.SIZE,
    contentWidth:Ti.UI.SIZE,
    contentHeight:Ti.UI.SIZE,
    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?

Lour answered 26/10, 2012 at 1:21 Comment(0)

L

0

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

Lour answered 17/12, 2013 at 5:14 Comment(0)

D

0

Maybe in the local HTML file you could turn scrolling off for the iframe. http://www.w3schools.com/tags/att_iframe_scrolling.asp

For example:

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

Donoghue answered 28/10, 2012 at 5:2 Comment(1)

That didn't work properly. I ended using media queries on the external file and that works pretty well. – Lour 30/10, 2012 at 18:46

B

0

I also came across the same problem and actually managed to find a solution

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

Brunhilda answered 22/11, 2013 at 10:28 Comment(0)

L

0

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

Lour answered 17/12, 2013 at 5:14 Comment(0)

A

0

It is answered here: iframe size with CSS on iOS

Simply wrap your iframe in a div with:

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

http://jsfiddle.net/R3PKB/7/

Apiary answered 8/6, 2014 at 22:13 Comment(0)

Recommended topics

Hot tags