stop a webview scrolling to the right?

Is it possible to use a webview and stop it from allowing scroll to the right into white space.

I have a fixed with on the webview, on the HTML inside it, but it still scolls.

I want the webview to scroll vertically so i tried to use touchEnabled:false but this means no vertical scroll.

So, i put it in a scrollableview, but the touchEnabled prevents scrolling on that.

Any ideas?

Platform - Titanium 1.7.1 and Android 2.2

2 Answers

Accepted Answer

What you can do is put your webview within a view that spans the entire height of the html page. You can then kill the scroll on your webview so that it doesn't scroll around inside your view, and you will get vertical scroll from your native view extending below the bottom border of your screen.
— answered June 28th 2011 by Anthony Decena
permalink

12 Comments
- Thanks, but i am not sure i understand you.
  
  I put my web view in a standard view.. ok.
  Then kill the scroll on my webview… using touchEnabled:false?
  
  This stops the view being scrollable.. i cannot scroll it down.
  
  The height of the webview is potentially going to change, so i don't know its height.. i am using auto.
```
    // main container
    taxCalc.incomeTaxRates.wView = Ti.UI.createWebView({
        html:'',
        //touchEnabled:false,
        width:300
    });
    //taxCalc.incomeTaxRates.wViewContainer = Ti.UI.createScrollableView({
    taxCalc.incomeTaxRates.wViewContainer = Ti.UI.createView({
        //views:[taxCalc.incomeTaxRates.wView],
        top:40,
        width:300,
        height:'auto',
        touchEnabled:true,
        borderRadius:5,
        backgroundColor:'#ffffff'
    });
    taxCalc.incomeTaxRates.wViewContainer.add(taxCalc.incomeTaxRates.wView);
    win.add(taxCalc.incomeTaxRates.wViewContainer);
```
  — commented June 28th 2011 by Jez Manser
- Thats pretty much the gist of it … Im not sure of another way, but if you set that height to a high number, you'll see how the view scrolls.
  
  — commented June 28th 2011 by Anthony Decena
- You may be able to get the height back from an app level event from within your webview … may get a bit complex, but not unheard of.
  
  — commented June 28th 2011 by Anthony Decena
- Nope, that definitely does not work with following code;-
```
    // main container
    taxCalc.incomeTaxRates.wView = Ti.UI.createWebView({
        html:'',
        touchEnabled:false,
        width:300
    });
    //taxCalc.incomeTaxRates.wViewContainer = Ti.UI.createScrollableView({
    taxCalc.incomeTaxRates.wViewContainer = Ti.UI.createView({
        //views:[taxCalc.incomeTaxRates.wView],
        top:40,
        width:300,
        height:900,
        touchEnabled:true,
        borderRadius:5,
        backgroundColor:'#ffffff'
    });
    taxCalc.incomeTaxRates.wViewContainer.add(taxCalc.incomeTaxRates.wView);
    win.add(taxCalc.incomeTaxRates.wViewContainer);
```
  The touch enabled false on the web value means that it does not allow the parent window to scroll either.
  
  This is android.
  
  — commented June 28th 2011 by Jez Manser
- Ok, back to the drawing board … we'll have to see what else might work.
  
  — commented June 28th 2011 by Anthony Decena
- Ok, found the issue…
  It needs to be a scrollView, not a scrollableView…
```
Ti.UI.createScrollView({
    layout:     'vertical',
```
  — commented June 28th 2011 by Jez Manser
- Thanks for taking the time, Anthony, its much appreciated.
  
  — commented June 28th 2011 by Jez Manser
- No worries, keep on coding ….
  
  — commented June 28th 2011 by Anthony Decena
- Can you possibly provide your solution Jez? I'm having the same issue with Titanium 1.7.1 and Android 2.2.
  
  Did you put a webview inside of a scrollview and set the contentHeight to 'auto'? I tried that and the html page now has too much white space at the bottom, but the horizontal scrolling was removed.
  
  — commented July 26th 2011 by Mark Goldsmith
- Yes, i put the web view in a scrollView, but to make the heights work without trying to guess the content height (which results in lots of white space at the bottom - or the content being cut off);- I simply didn't set a height on either the webview or the scrollview.
```
var htmlContent = taxCalc.carVanFuel.updateScreen(this.responseXML);
        // main container
        taxCalc.carVanFuel.wView = Ti.UI.createWebView({
            html:htmlContent,
            touchEnabled:false,
            width:Number(taxCalc.carVanFuel.contentWidth + 20),
            borderRadius:5
        });
        taxCalc.carVanFuel.wViewContainer = Ti.UI.createScrollView({
            top:'68dp',
            bottom:'15dp',
            width:Number(taxCalc.carVanFuel.contentWidth + 20),
            borderRadius:5,
            backgroundColor:'#ffffff'
        });
        taxCalc.carVanFuel.wViewContainer.add(taxCalc.carVanFuel.wView);
        win.add(taxCalc.carVanFuel.wViewContainer);
```
  — commented July 27th 2011 by Jez Manser
- That didnt work for me. The way I handled the problem was by setting a meta tag in the HTML. I didnt put the webview inside of a scrollview, just added it directly to the window. It turns out my problem was Android wasn't recognizing the page as a zoomed-in mobile view.
```
meta name="viewport" content="width=320,  user-scalable=no, initial-scale=2.5, maximum-scale=2.5, minimum-scale=2.5" 



var webView = Ti.UI.createWebView({
    html:htmlVar,
    backgroundColor:'transparent',
    scalesPageToFit: false,
    top:40,
    left:40,
    width:410,
    height:520
});
win.add(webView);
```
  — commented July 27th 2011 by Mark Goldsmith
- Thanks Mark Goldsmith!
  That is the way that it should be done and this is working for me!
  
  — commented January 11th 2012 by Léon Doornkamp
3 Votes
Does anyone of you tried to use some Webkit supported meta tags…? e.g.

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
— answered January 18th 2012 by Philipp Waldmann
permalink

6 Comments
- I tried using "touchEnabled: false" as mentioned above. It stopped horizontal scrolling but I also couldn't click on any of my webpage elements.
  
  What I did to solve this was inject the meta tag mentioned above into the html page, and set the left and right properties of the webview to 0. I also got the width of the screen and used that as the content width in the meta tag.
```
var webView1 = Titanium.UI.createWebView({
    scalesPageToFit: false,
    left: 0,
    right: 0,
    bottom: 0,
    top: 30,
    zIndex: 1,
    enableZoomControls: false,
      url: cbankMobile

});

var scrwidth = Titanium.Platform.displayCaps.platformWidth;

webView1.url =
        'javascript:(function evilGenius(){' 
            + 'var m=document.createElement("meta");'
            + 'm.name = "viewport";'
            + 'm.content = "width=' + scrwidth + ',  user-scalable=no, initial-scale=2.5, maximum-scale=2.5, minimum-scale=2.5";'
        + '})();';
```
  — commented January 24th 2012 by Tommy Davenport
- Just noticed I forgot a line of code that appends "m" into the document. It goes after that last line of code in function evilGenius.
```
+ 'document.getElementsByTagName("head")[0].appendChild(m);'
```
  — commented January 25th 2012 by Tommy Davenport
- If in this meta tag width value is equal to device-width and web view width is smaller than device-width, then web view scrolls to right and left. If you change this value to same as web view width (or smaller) it doesn't scroll to sides any more.
  
  — commented March 16th 2012 by Mindaugas Vaičiūnas
- worked like a charm for me. Just copied the meta into my head of the html page and it cropped to the device width stopping any horizontal white space scrolling :-) Cheers!
  
  — commented June 17th 2012 by Alex Dean
- meta tag worked for me too. just a note: if you have some javascript in your html then screen.width returns the width of the WebView object on Android, however, on iOS it returns the actual screen width (which is what I would expect from the screen object). Once again Android proving what a pain in the ass it can be :( Same applies to the height property. Also, screen.width and window.innerWidth work PERFECTLY on iOS without the need to add meta tags or do any other fancy stuff (like view containers). Android is a real pain in the ass :(
  
  — commented January 22nd 2013 by Robin Stoker
- @Tommy Davenport when you put the code webview1.url=blah blah does that not override the original url set in the webview declaration.? Also based on your second comment, should the evil genius function be as follows
```
webView1.url =
        'javascript:(function evilGenius(){' 
            + 'var m=document.createElement("meta");'
            + 'm.name = "viewport";'
            + 'm.content = "width=' + scrwidth + ',  user-scalable=no, initial-scale=2.5, maximum-scale=2.5, minimum-scale=2.5";'
        + 'document.getElementsByTagName("head")[0].appendChild(m);'
+ '})();'
```
  Been having this problem a long time and can't manage to solve it. Your help would be much appreciated as soon as possible
  
  — commented February 6th 2014 by user 4683
2 Votes

Titanium Community Questions & Answer Archive

We felt that 6+ years of knowledge should not die so this is the Titanium Community Questions & Answer Archive

stop a webview scrolling to the right?

2 Answers

Accepted Answer