CODEWITHSUNDEEP
androidhtmleclipsetwitter-bootstrapwebview
Vivek
Vivek

Reputation: 382

Twitter Bootstrap not working in Android WebView

HTML file(test.html) is 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <link href="bootstrap.css" rel="stylesheet" type="text/css"/>
    <link href="bootstrap-responsive.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<h1>Hello World!!!</h1>
 <a class="btn btn-primary btn-large">
    Learn more
</a>
</body>
</html>

HTML and bootstrap css files are placed in assets folder. If I open the HTML file in IE/Firefox, it is displayed correctly. But Android WebView does not render this properly

Code for WebView is

WebView webView = (WebView) findViewById(R.id.webview);
webView.getSettings().setJavaScriptEnabled(true);
String url = "file:///android_asset/test.html";
webView.loadUrl(url);

IE renders it like this

IE Renders it like this

WebView renders it like this

WebView Renders it like this

What is wrong?

Upvotes: 10

Views: 8967

Answers (4)

juan Isaza
juan Isaza

Reputation: 3987

In kotlin:

webview.settings.javaScriptEnabled = true

Upvotes: 0

nithin joseph
nithin joseph

Reputation: 461

  WebView webView = (WebView) findViewById(R.id.webview);
  webView.getSettings().setJavaScriptEnabled(true);    
  String htmlData ="<link rel=\"stylesheet\" href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css\">"+yourdata;    
  webview.loadData(htmlData, "text/html",  "UTF-8");

Upvotes: 0

random
random

Reputation: 10309

Tested on emulator - Android version 4.2 with Bootstrap v2.3.2

Files in my app's assets folder:

 bootstrap-responsive.css
 bootstrap.css
 test.html

No need to add "android.permission.INTERNET" in Android manifest since css files are available locally within the app's asset folder.

Here's a screenshot of how it is rendered. There is no reason why you could not see it unless there are issues with the CSS files (which is again unlikely since you can see the results on browser).

enter image description here

Upvotes: 1

Rohit Chemburkar
Rohit Chemburkar

Reputation: 1049

Add this line

webView.getSettings().setDomStorageEnabled(true);

Upvotes: 3

Related Questions