Titanium Community Questions & Answer Archive

Question

Webviews - remove the native iPhone scroll-limit dropshadow

Hi there,

When scrolling a webview, some ugly drop-shadows appear to define the limits of the content. These are the native shadows you also get when scrolling to the ends of a page in mobile safari.

See: http://bit.ly/dh11Gx

Would anyone know of a simple way to remove these?

Thanks!

Answer 1

Was able to stop this by placing the webview within another element - eg. tableview.

Answer 2

A solution I found was to simply put the webview inside a scrollView. This worked nicely for me, no more drop shadows:

 var scrolly = Titanium.UI.createScrollView({
   contentHeight:'auto',
   showVerticalScrollIndicator:true,
   top:45,
   left:15,
   width:270,
   height:300
  });
  view.add(scrolly);


  var webView = Ti.UI.createWebView({
    backgroundColor:'transparent',
    scrollable:false,
    touchEnabled:false,
    top:0,
    left:0,
    width:270,
    height:'auto'
        });
   scrolly.add(webView);

Answer 3

There is now way….

You can only set the content size of the webview larger than needed and set the position of the webview in the window more in the middle…. with that the shadows are out of the area a user can pull the webview….

in the content html you need to set a margin-top for the body element…. with that your content is visible like normal….

Titanium Community Questions & Answer Archive

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

Webviews - remove the native iPhone scroll-limit dropshadow

3 Answers