CODEWITHSUNDEEP
androidandroid-layoutandroid-webview
pinoyyid
pinoyyid

Reputation: 22316

How do I scroll within HTML rather than in the View?

I have a WebView, which displays an HTML page with a toolbar div, followed by a long text div. The toolbar div should be always visible, so it's defined as position fixed.

On a Nexus 4, and Note 2 it's all fine. However there is a problem running it on an ICS Galaxy Tab. Everything displays OK, but touching a toolbar button behaves as if it's the content div that has received the touch event instead of the toolbar.

I'm assuming this is a bug in ICS, perhaps on this specific device. So I'm looking for a workaround where instead of the scrolling taking place within the Android layout, the scrolling is done with the HTML page. That way I can simply have two consecutive divs which won't overlap, and hence shouldn't be susceptible to the suspected bug.

How do I tell Android to scroll within the html, rather than within the layout?

LAYOUT FILE 

xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:orientation="vertical"
android:layout_height="match_parent"
tools:context=".WebviewActivity1" >
 <WebView
    android:id="@+id/webView1"
    android:layout_width="match_parent" 
    android:layout_height="match_parent" >   
 </WebView> 
</LinearLayout>

HTML

<body>
 <div id='toolbar' style='position: fixed; top:0px; width: 100%; z-index:99">
    toolbar
 </div>
 <div id='scrollable_content' style="overflow-y: auto; z-index:1>
     lorem ipsum
 </div>
</body>

Upvotes: 2

Views: 202

Answers (3)

marcin.kosiba
marcin.kosiba

Reputation: 3231

If you don't want the WebView to scroll set it's height to wrap_content: android:layout_height="wrap_content"

Upvotes: 0

pinoyyid
pinoyyid

Reputation: 22316

OK I've figured it out. The problem is that because my HTML page was growing taller than the display, whatever I did, the WebView was scrolling it.

To prevent the WebView from scrolling, I first had to constrain the height of my HTML to the height of the viewport. Once I did that, there was nothing for the WebView to scroll, so I'm getting the effect I'm looking for.

Upvotes: 1

danny117
danny117

Reputation: 5651

https://api.jquerymobile.com/toolbar/ You'd then have the support of the corporations that support jquerymobile if you still have a problem.

Upvotes: 0

Related Questions