CODEWITHSUNDEEP
javascriptandroidhtmlcsswebview
user3001881
user3001881

Reputation: 11

android webview wrapp content no working and webview can't set height after it has loaded a page

I'm trying to load html that contains only a single picture, in a WebView. The webview should wrap what ever it contains, so I put the width to "fill_parent" and the height to "wrap_content".

The picture should extend to the Width of the WebView, the height should auto adjust to keep the aspect ratio, and the picture should be non-scrollable in the WebView. To do this I set the style of the picture and html body to :

body{
margin:0px; 
padding:0px;  
}
img {
margin:0px;
padding:0px;
width:100%;
height:auto;
}

This works OK but for some pictures is leaving a blank space at the bottom of the WebView. This happens randomly, for example it also can happen that the picture is very tiny and it works.

I also tried a lot of different methods to achieve this:

1 - On the img "loaded" js event call back to android code with the size of the picture, calculate the corresponding dimensions of the WebView and set it from code. <-- has no effect. <-- Why?? I also tried to call .Invalidate(); on the WebView after setting the height <-- no result.

2 - On the img "loaded" js event calculate the corresponding dimensions of the WebView and call "window.resizeTo(w,h)" <-- no effect <--later I found out that this is a bug in Chrome. Funny is that it works perfectly if you try it on IE.

And a few other tricks. But all ended up either in that the WebView doesn't wrap content or that the WebView ignores any setting of the height after the page is loaded.

Any help or suggestions will be very useful, since I spent my weekend on this without any success.

Upvotes: 1

Views: 1338

Answers (1)

Angry 84
Angry 84

Reputation: 2995

It seems the height does need to be re-set after a page change/load

I've just been playing around with this bug as it was bothering me and being more of a web vs mobile app developer.. Wanted to get this sorted so i could continue on my way.

After an hour or so of playing around with the webview.... It seems the height does need to be re-set after a page change/load....I'm working with local strings and loading them via "WebView.loadData"

Here is some example code that should work? Maybe not for all, but its what i'm testing with currently...

Please also note that this is using a "RelativeLayout" and the practice of using a "final" is not always recommended like in this example (but keeps the code shorter for now) and sorry for lacking of all the comments

//LOCATE OUR WEBVIEW
final WebView tmpWeb=(WebView) findViewById(R.id.myWebView1);

// WEBVIEW LISTENER: DETECT WHEN PAGE HAS LOADED
tmpWeb.setWebChromeClient(new WebChromeClient() {
    public void onProgressChanged(WebView view, int progress) {
        if (progress==100) {
            // PAGE HAS LOADED, SET HEIGHT BACK TO WRAP_CONENT
            tmpWeb.setLayoutParams(new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.MATCH_PARENT,RelativeLayout.LayoutParams.WRAP_CONTENT));

            // MY NEW CODE: CONTINUE THE APPLICATION/GUI/USER
            // Here we would re-enable buttons/gui's and so on.
        }
    }
}

// CHANGE WEBVIEW HEIGHT TO 20 - NOTHING SHOULD HAPPEN BELOW THIS CODE
tmpWeb.setLayoutParams(new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.MATCH_PARENT,20));
tmpWeb.loadData("<p>My HTML</p>", "text/html", "utf-8");

Remember this is just an example of what is working for me at the current moment.... So a Few other things to keep in mind

  • When loading a page by user click, make sure the button does not double click "run twice)
  • Opening another page/loadData before the current one has loaded and reached 100%
  • Error handling, If a page does not load.. i dont think it would reach 100% in this progress
  • Waiting for pictures to load (Consider pre-sizing/positioning them with CSS)
  • Other dynamic webpage content that will resize after loading the page (google this)
  • And anything really that can happen after a page loads that changes it size

As for the HTML side of it

Generally the HTML/CSS should work regardless as all pages will shrink by default to their smallest dimensions.

Upvotes: 0

Related Questions