83922

White space at the bottom of WebView in Android

Question:

I'm developing an Android application and I'm loading one google maps iframe in a WebView, just like this one:

<a href="http://maps.google.es/maps/empw?url=http:%2F%2Fmaps.google.es%2Fmaps%3Ff%3Dq%26source%3Ds_q%26hl%3Des%26geocode%3D%26q%3Dmadrid%26aq%3D%26sll%3D40.396764,-3.713379%26sspn%3D11.856886,23.269043%26vpsrc%3D0%26ie%3DUTF8%26hq%3D%26hnear%3DMadrid,%2BComunidad%2Bde%2BMadrid%26t%3Dm%26z%3D10%26ll%3D40.416691,-3.700345%26output%3Dembed&hl=es&gl=es" rel="nofollow">http://maps.google.es/maps/empw?url=http:%2F%2Fmaps.google.es%2Fmaps%3Ff%3Dq%26source%3Ds_q%26hl%3Des%26geocode%3D%26q%3Dmadrid%26aq%3D%26sll%3D40.396764,-3.713379%26sspn%3D11.856886,23.269043%26vpsrc%3D0%26ie%3DUTF8%26hq%3D%26hnear%3DMadrid,%2BComunidad%2Bde%2BMadrid%26t%3Dm%26z%3D10%26ll%3D40.416691,-3.700345%26output%3Dembed&hl=es&gl=es</a>

It is showing correctly in Android emulator, but when I try in a real device a white space quite big appears at the bottom of the screen, so you can't see the whole iframe. I tried with two mobiles, one with android 2.2 and another one with android 2.3

I had a look to this one which sounds the same thing:

<a href="https://stackoverflow.com/questions/7172686/problem-with-extra-space-at-the-bottom-of-android-webview" rel="nofollow">Problem with extra space at the bottom of android Webview</a>

but it didn't work for me. Also tried some other things I read about like:

webView.getSettings().setUseWideViewPort(true); webView.setWebViewClient(new WebViewClient() { @Override public boolean shouldOverrideUrlLoading (WebView view, String url) { view.loadUrl(url); return false; } });

but nothing worked. Any idea?

Thanks in advance.

Answer1:

I can see the <body> element at the link you posted has bottom margin of 14px - maybe that's it? You can eliminate it using a JavaScript snippet in your WebView after you have loaded the page, like this:

myWebView.loadUrl("javascript:document.getElementsByTagName('body')[0].style.marginBottom = '0px'");

also, there is a 44px margin on the right, if you wanna get rid of that one also, should be something like this:

myWebView.loadUrl("javascript:document.getElementsByTagName('body')[0].style.marginBottom = '0px';document.getElementsByTagName('body')[0].style.marginRight = '0px';");

Also, to future-proof your app, you may want to set all four margins to 0, just in case.

Answer2:

Set the bottom and right margins to 0:

webView.loadUrl("javascript:document.body.style.marginBottom=document.body.style.marginBottom= '0px'");

Answer3:

It could be the problem with your XML.

Can you check that your WebView is not inside the ScrollView or anything which is having its inbuilt scroll. It might result in extra white spaces.

Answer4:

The other answers didn't work for me but this did:

webView.loadUrl("javascript:(function () {document.getElementsByTagName('body')[0].style.marginBottom = '0'})()");

Recommend

  • Using an update statement for Access database (VB 2008)
  • Assigning individual bits to bytes
  • Why does VirtualWire conflicts with PWM signal in Arduino/ATmega328 pin D10?
  • excel 2010 edit multiple hyperlinks VBA, macro
  • SIGSEGV when writing java code
  • How to merge multiples columns of a table into 1 in R
  • Extract data from a nested list with loops
  • How to format the data of a file in Unix?
  • White space at the bottom of WebView in Android
  • Which character encoding is the IPython terminal using?
  • How locks (S,X,IS,IX) work in Mysql with queries like FOR UPDATE/LOCK IN SHARE MODE?
  • Is it possible to reference discrete ranges in google scripts?
  • ggplot2: Plotting regression lines with different intercepts but with same slope
  • InputDispatcher Error
  • Recreate Apple Watch fitness tracker ‘progress’ bar - gradient on CAShapeLayer stroke
  • css font-size and line-height not matching the baseline
  • Certain Arabic text gets incorrectly shown while other Arabic text gets showed normally?
  • How to implement Deep Linking in Roku SG application?
  • Multicolored edittext hint
  • Redux Form - Not able to type anything in input
  • Problems compiling files using JOGL
  • How can I sort a a table with VBA with given text condition?
  • ActiveRecord query for a count of new users by day
  • All Classes Conforming to Protocol Inherit Default Implementation
  • Opengl-es onTouchEvents problem or a draw problem? [closed]
  • Deserializing XML into class C#
  • Function pointer “assignment from incompatible pointer type” only when using vararg ellipsis
  • Rearranging Cells in UITableView Bug & Saving Changes
  • Circular dependency while pushing http interceptor
  • Linker errors when using intrinsic function via function pointer
  • FormattedException instead of throw new Exception(string.Format(…)) in .NET
  • python draw pie shapes with colour filled
  • How to Embed XSL into XML