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

Question

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.

score 2 · Answer 1 · edited May 23 '17 at 12:14

2

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.

edited May 23 '17 at 12:14

Community

1
1

answered Jul 26 '16 at 09:56

Rene Pot

24,681
7
68
92

1

Agree this is not pretty, but the only way I have found to make it work. And I've tried for years! – Jeff Bonnes Jul 26 '16 at 11:42
This method gives same height as Ti.UI.SIZE. For example text: 'Some page some text2 Some page some text2 Some page some text2' will return height: 240 (where on Android it is 38 and that's proper value) so there is still gap below. Please try the code. – kreatywny Jul 27 '16 at 11:08
The strange thing is that height is not increasing as line function. For example: if on iOS is 240 than the real height is 38 (~6.31x), if it is 7060 than the real height is 931 (~7.58x). The value is same for all iOS devices (iPhone 5/6, iPad Pro) and it is also surprising (gap on Iphone 5 is smaller than on iPad Pro). – kreatywny Jul 27 '16 at 11:25
It seems that on iOS the height returned is somehow connected with number of characters. If on Android we have 4 lines of text (height: 76), than on iOS (depending on character quantity) we will have values like: 560, 640, 720, 800. But for 5 lines of text (height: 96 on Android) we will start with ~880 on iOS. – kreatywny Jul 27 '16 at 12:21

score 0 · Accepted Answer · answered Jul 27 '16 at 13:05

0

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

answered Jul 27 '16 at 13:05

kreatywny

214
2
13

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

2 Answers2