CODEWITHSUNDEEP
androidwebview
Steve Haley
Steve Haley

Reputation: 55714

Overlapping content with transparent WebView background

I'm using a WebView to display HTML content, including a JavaScript function to show or hide sections of the page when links are pressed. By default, all sections are hidden. Everything works fine until I set the background of the WebView to be transparent, so that a static image is displayed behind it.

Here are the relevant code snippets:

HTML section:

<a class="togglelink-show" onclick="toggle('zone1');">Test</a>
<div id="zone1" style="display:none">
    <p>Some random text that's normally hidden</p>
</div>

JavaScript:

function toggle(id) {
    ele = document.getElementById(id);

    if(ele.style.display == "block") {
        ele.style.display = "none";
    } else {
        ele.style.display = "block";
    }
}

As I wrote, those two work fine, until I set the WebView to have a transparent background using webView.setBackgroundColor(0); After that, when trying to open a section, sometimes the WebView does not re-layout properly, and content overlaps with the sections below.

Refreshing the page, or using webView.clearView() don't work because then the page is refreshed with the section closed. Any suggestions?

If there's another way to display a static image behind the webview, that's resized to fit the screen exactly, that could work too. (I'm a bit rusty with HTML, and could only remember how to tile a background image, which certainly isn't what I want.)

Upvotes: 1

Views: 2615

Answers (2)

Li Zonglei
Li Zonglei

Reputation: 31

i met this too. and my solution is call "webView.setBackgroundColor(0x01010101);" i think it's more or less than transparent.

Upvotes: 3

Steve Haley
Steve Haley

Reputation: 55714

I've solved this, but in a very random manner. I don't know which elements were the magic trick, but what I've ended up with is something like this:

Added an empty div above the main content window, and edited the styles:

<div id="fixedBackground"><img src="" width="0%" height="0%"/></div>
//From the stylesheet:
#fixedBackground    { position:fixed; top:0; left:0; width:100%; height:100%;}
.content {position:relative; z-index:1;}

This makes the background to the WebView show through, and has everything reposition itself properly after opening or closing sections.

Upvotes: 0

Related Questions