Titanium Community Questions & Answer Archive

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

WebView Scrolling Issues

Hi,

I am experiencing issues with scrolling in a WebView. I currently have a WebView that has HTML content. My WebView width and height is bigger then the device (ipad) screen size so the user will have to scroll along the to see the rest of the content.

The problem I am getting is I that can't seem to scroll freely like in a ScrollView, instead I am only able to scroll either left and right or up and down. I cant seem to scroll in any other direction. I want to be able to scroll freely in any direction like in the ScrollView instead or just up or down and left or right.

Has anyone experienced this problem and if so can you please provide me with a solution. I've search the Internet for days without success!

Many Thanks!

— asked January 27th 2012 by Harvinder Sembhi
  • scrolling
  • scrolling issue
  • scrollview
  • webview
  • webview scrolling
0 Comments

2 Answers

  • Thanks for your answer Rainer but your suggestion didn't work for me.

    I managed to find a way around the WebView one-directional scrolling by putting the WebView inside ScollView and setting the 'touchEnabled' on the WebView to 'false' however this then means I can't click on any html buttons etc.

    Here is my code:

    
    var tabGroup = Titanium.UI.createTabGroup();
    
    var win1 = Titanium.UI.createWindow({  
        title:'Tab 1',
    });
    
    var webview = Ti.UI.createWebView({
        url: "http://www.appcelerator.com",
        touchEnabled: false,
    });
    
    var scrollView = Ti.UI.createScrollView({
        contentWidth:'auto',
        contentHeight:'auto',
        showVerticalScrollIndicator:true,
        showHorizontalScrollIndicator:true
    });
    
    var view = Ti.UI.createView({
        width:'1000',
        height:'2000',
    });
    
    view.add(webview);
    scrollView.add(view);
    win1.add(scrollView);
    
    var tab1 = Titanium.UI.createTab({  
        icon:'KS_nav_views.png',
        title:'Tab 1',
        window:win1
    });
    
    tabGroup.addTab(tab1);  
    
    tabGroup.open();
    
    — answered January 27th 2012 by Harvinder Sembhi
    permalink
    3 Comments
    • my question: why do you put the webview in a scrollview. A webview works like a scrollview.

      — commented January 27th 2012 by Rainer Schleevoigt
    • Not when it comes to scrolling. For some reason the WebView seems to only have one-directional scrolling i.e. you cant scroll horizontally and vertically at the same time unlike the ScrollView. This is a major issue as it's a major requirement in what I'm trying to develop.

      To over come this I set 'touchEnabled' on WebView to 'false' and then put the WebView inside a View, the View into a ScrollView and the ScrollView into the window. Doing it this way gives me exactly what I am after however setting 'touchEnabled' to 'false' disables ALL events in WebView, even click events, meaning I can't click on anything on the screen which is pointless.

      I was wondering if there is a way of disabling scroll on the WebView and have the ScrollView do all the scrolling but still be able to click buttons/links in the WebView container?

      — commented January 27th 2012 by Harvinder Sembhi
    • i have same issues ..if anyone find solution than please tell.

      — commented April 19th 2012 by Jayesh Joshi
  • If you pack webviews in a scrollable view, then the width of webview must be equal or smaller then width of scrollable view.

    — answered January 27th 2012 by Rainer Schleevoigt
    permalink
    0 Comments
The ownership of individual contributions to this community generated content is retained by the authors of their contributions.
All trademarks remain the property of the respective owner.