CODEWITHSUNDEEP
webviewtitaniumappceleratortitanium-mobileappcelerator-mobile
mschierhorn
mschierhorn

Reputation: 35

How to achieve a dynamic height of a WebView (in Titanium Appcelerator)?

Hey Appcelerator Developer,

I'm just testing with an AdServer System and new kinds of Ads. The problem is, that the Ad will change its height when you click on it via JavaScript. How can I achieve that the WebView will change its height accordingly? Because I want that the WebView will only have the height of the Ad content, so that you still can click on the content behind/under the WebView. I place the WebView on top of the window with a very high zIndex. It also could be that no Ad will be delivered and the size of the Ad will be 0. Can I also change the height accordingly? It would be great when the WebView would change its height automatically accordingly to its content.

Any help would be highly appreciated :)

Upvotes: 2

Views: 3367

Answers (2)

Zuzia Hartleb
Zuzia Hartleb

Reputation: 401

Include a viewport meta tag in Your page header

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

I also set WebView width (I'm not sure that's necessary).

You cand find out more about the viewport meta on Mozilla Developer Network https://developer.mozilla.org/en-US/docs/Mobile/Viewport_meta_tag

Upvotes: 2

Alex Naspo
Alex Naspo

Reputation: 2102

Is the ad the only thing inside the web view? If so, give the web view a height property of

height:Ti.UI.SIZE

This will give the Web view the height of its children. Then, try adding this within the click function

webView.addEventListener('click', function(e){
   webView.setHeight(Ti.UI.SIZE);
});

This should reset the height of the web view to the size of the children every time it is clicked. I have never tested this, however in theory it sounds solid. Let me know if this helps. Good luck!

Upvotes: 1

Related Questions