CODEWITHSUNDEEP
androidhtmlwebview
Aaron
Aaron

Reputation: 541

Android WebView isn't displaying Tables correctly

What I have is a simple WebView app to display a website. The issue is when I run the app on API 16 that the WebView doesn't display a table correctly all of the time. If I restart the app a few times, it will eventually load fine. Seemingly random though, it will do some crazy things to the table. I've also ran this app on API 19, 20, and 21 without ever having this issue.

When it loads fine:

enter image description here

And when it doesn't

enter image description here

Below are my snippets of code from the project. I should also note that I have the basics like internet permissions in the manifest and javascript enabled before loadUrl.

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<WebView  xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/activity_main_webview"
android:layout_width="match_parent"
android:layout_height="match_parent">
</WebView>

MainActivity.java

public class MainActivity extends Activity {

private WebView mWebView;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    mWebView = (WebView) findViewById(R.id.activity_main_webview);

    // Enable Javascript
    WebSettings webSettings = mWebView.getSettings();
    webSettings.setJavaScriptEnabled(true);

    webSettings.setDomStorageEnabled(true);
    mWebView.loadUrl("http://www.mywebsite.com/page.html");

}

HTML loading in WebView

<div style="z-index: 5001; position: fixed; width: 100%; top: 0px; background-color: white;">
<table style="width: 100%; text-align: center;">
<tbody>
<tr>
<td style="border: 1px solid silver;" id="menu1-t" ><img style="width: 100%; max-width: 60px;" src="images/image.png" ></td>
<td style="border: 1px solid silver;" id="menu2-t" ><img style="width: 100%; max-width: 60px;" src="images/image.png" ></td>
<td style="border: 1px solid silver;" id="menu3-t" ><img style="width: 100%; max-width: 60px;" src="images/image.png" ></td>
<td style="border: 1px solid silver;" id="menu4-t" ><img style="width: 100%; max-width: 60px;" src="images/image.png" ></td>
<td style="border: 1px solid silver;" id="menu5-t" ><img style="width: 100%; max-width: 60px;" src="images/image.png" ></td>
<td style="border: 1px solid silver;" id="menu6-t" ><img style="width: 100%; max-width: 60px;" src="images/image.png" ></td>
</tr>
</tbody>
</table>
</div>

If anybody has seen this before or has any ideas, help would be much appreciated.

Upvotes: 2

Views: 3371

Answers (1)

Aaron
Aaron

Reputation: 541

It seems simply adding table-layout: fixed and box-sizing: border-box to my table has solved the problem.

Upvotes: 1

Related Questions