CODEWITHSUNDEEP
webviewtitaniumappceleratortitanium-mobileappcelerator-mobile
kreatywny
kreatywny

Reputation: 228

Webview autoheight to content is not working on iOS (Appcelerator Titanium)

I want to add webview which height would be as it content. I make it running smoothly on Android but on iOS the longer the text is the longer space below text is.

Here is my code:

var window = Ti.UI.createWindow();

var scrollView = Ti.UI.createScrollView({
    layout: 'vertical',
    height: Ti.UI.SIZE
});

    var view1 = Ti.UI.createView({
        height: 200,
        backgroundColor: 'red'
    });

    var webview = Ti.UI.createWebView({
        height: Ti.UI.SIZE,     
        html: '<html><head><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2"></head><body style="margin:0; background-color: blue">Some page some text2</body></html>'
    });

    var view2 = Ti.UI.createView({
        height: 200,
        backgroundColor: 'green'
    });

    scrollView.add(view1);
    scrollView.add(webview);
    scrollView.add(view2);

    window.add(scrollView);

window.open();

Thanks in advance.

Upvotes: 0

Views: 544

Answers (2)

kreatywny
kreatywny

Reputation: 228

It seems it's a bug / discouraged method for iOS. No direct workaround. Can be checked here: Jira Ticket about problem with iOS 9, Jira Ticket about problem with webView + ScrollView

Upvotes: 0

Rene Pot
Rene Pot

Reputation: 24815

The webview doesn't know the size of the content. But you can ASK the webview how high the content is.

For this you need to use evalJS.

Use the JS found on StackOverflow:

var body = document.body,
    html = document.documentElement;

var height = Math.max( body.scrollHeight, body.offsetHeight, 
                       html.clientHeight, html.scrollHeight, html.offsetHeight );

and preferably put this in a function inside the webview. Lets say the above Javascript is in function getDocumentHeight and that function returns the height property. Now, to get the height use eval like this:

var height = webview.evalJS('getDocumentHeight()');
webview.height = height;

Now, you want this to execute every time the content is loaded, assuming the content changes, so in that case you can watch the load event (doc here) and trigger the evalJS above every time this event is fired.

It will not be very pretty, as the webview is not intended to scale like this, but it works.

Upvotes: 2

Related Questions