I have some problem with content in webview
Simple webview:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<WebView
android:id="#+id/someWebview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="vertical"
/>
</RelativeLayout>
Here I call that
WebView webView = (WebView)view.findViewById(R.id.someWebview);
webView.clearView();
webView.getSettings().setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);
webView.getSettings().setLoadWithOverviewMode(true);
webView.getSettings().setUseWideViewPort(true);
webView.loadDataWithBaseURL(null, content, null, "utf-8", null);
and content looks something like this
<!DOCTYPE html>
<html>
<head>
<title>some</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=0;"/>
<style>
*{margin:0; padding:0;}
html, body{width:100%;}
</style>
</head>
<body>
<p style="width:50%; margin: 50px 0 0 100px; background-color: #0000ff">asdasd</p>
<div style="width: 20%; margin-left: 50px; background-color:#ff0000; padding:0 50px;"><p style="background-color:#ffffff;">dfgdfg</p><div style="width:30%;margin-left: 50px;background-color:#1e1e1e;">dsdsd</div></div>
</body>
</html>
So, problem is what margin-left does not work, but margin-top is ok.. how can I fix this? I can't use android:paddingLeft cause i need margin only some content not all of this
I can't add image to post, so uploaded them here: http://imgur.com/FObDiaA,q9W5tvV
first is desktop browser, second webview
Update
So guess I "solve" problem in my case with parsing html and adding container div's with paddings in places where I need, but this is bad hack and guess not all case can use this, so I think question still open - why margins left/right doesn't work?
Related
Trying to view webpage content on my Android phone. The phone has soft-buttons and so the page content near the bottom of the page is partially obscured by the soft-buttons.
Is there a CSS approach to adjust for the possibility of soft-buttons within the mobile web browser? Or does one set some giant margin-bottom value to the content and hope for the best?
Pic: https://i.imgur.com/9qH4s2W.png
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
body
{
margin: 0;
padding: 0;
overflow: hidden;
display:flex;
justify-content: flex-end;
flex-direction: column;
width:100vw;
height:100vh;
}
</style>
</head>
<body>
<div class="content">
<img src="https://picsum.photos/100/100">
</div>
</body>
How to load a html content with fixed height and width into a android webview which has height and width set to wrap_content?
This is my HTML page i.e label.html loading from assets.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
#charset "utf-8";
/* CSS Document */
.Main{
width:50%;
height:200px;
border: 1px solid #09ED1C;
float:left;
background-color:#00F3FF;
}
H1{
color:#FC1D21;
}
</style>
</head>
<body>
<div class="Main" align="center">
<h1>This page is created using internal CSS</h1>
</div>
</body>
</html>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/blue">
<WebView
android:id="#+id/wv_help"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</RelativeLayout>
WebSettings webSettings = mWebViewHelp.getSettings();
webSettings.setJavaScriptEnabled(true);
mWebViewHelp.setScrollBarStyle(WebView.SCROLLBARS_INSIDE_OVERLAY);
mWebViewHelp.loadUrl("file:///android_asset/label.html");
This is adding white space on the right side of webview even though its wrap_content,WebView.SCROLLBARS_INSIDE_OVERLAY is also not solving my issue,any help would be much appreciated.
You need to add this in your HTML header:
<meta name="viewport" content="width=device-width, initial-scale=1">
So it will look like this:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>[YOUR_DOCUMENT_NAME]</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
I hope it works so not please respond
I have a problem with displaying a long very word in WebView. I don't want to scroll horizontally and zoom in/out. I just want the word to break if it's necessary (like <body style="word-wrap: break-word;">).
This is my simple html:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css" style="">
<!--
p
{margin-top:0;
margin-bottom:0}
-->
</style>
</head>
<body style="word-wrap: break-word;" dir="ltr" style="font-size:12pt; color:#000000; background-color:#FFFFFF; font-family:Calibri,Arial,Helvetica,sans-serif">
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br></p>
</body>
</html>
my settings for WebView:
mMessage.getSettings().setLoadWithOverviewMode(true);
mMessage.getSettings().setLayoutAlgorithm(WebSettings.LayoutAlgorithm.TEXT_AUTOSIZING);
xml:
<WebView
android:id="#+id/email_message"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
This is working if I have a normal text (with spaces) but with this text, it is shown in one line and horizontal scrolling is enabled. I was checking default android email client and the same mail is shown correctly (word breaks)
Any ideas how to achieve the same result?
try this solution, from How to force table cell <td> content to wrap?:
/* css-3 */
white-space: -o-pre-wrap;
word-wrap: break-word;
white-space: pre-wrap;
white-space: -moz-pre-wrap;
white-space: -pre-wrap;
I'm developing an android project in which consists of several activities each activity consists of webviews.i used html file and css to achieve this.but my webpages are different in different android devices.i dont want horizontal scrolling,it must automatically adapt to all devices.how is it possible?can any one find me a solution regarding this??
my webview.xml
<WebView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scrollbars="none"
android:id="#+id/webView" />
my java code
WebView web=(WebView)findViewById(R.id.webView);
web.getSettings().setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);
web.loadUrl("file:///android_asset/www/cube.html");
my cube.html file
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>INTRODUCTION</title>
<link rel="stylesheet" href="mystyles.css" type="text/css" />
</head>
<body>
<div class="section">
<h2>CUBE ROOT OF UNITY</h2>
<p>As discussed in the previous section that the cube roots of unity are <mark class= "bold">1, ω and ω<sup> 2</sup></mark> where <mark class= "bold">ω =e<sup>i2π/3</sup> = -1/2 + i √3/2 and ω<sup>2</sup> = e<sup>i4π/3</sup> = -1/2 -i √3/2.</mark> We shall now obtain cube roots of unity by an alternative method.</p>
</div>
</body></html>
and my css file
h2
{
font-family: "Times New Roman",Times,serif;
color: #002671;
font-size: 23px;
font-weight: bold;
border-bottom: 2px solid #CCC;
padding-bottom: 7px;
margin: 24px 0px 0px;
}
You might wanna try putting name="viewport" content="width=device-width, user-scalable=no" in the <meta>-container of the html file. ;)
This shoud resize the document and prevent the user from zooming, so in the end you'll have a document that is scrollable vertically.
I want to show my website on mobile devices in 100% width landscape and portrait view too.
I was tried this HTML code without any CSS declaration:
<!DOCTYPE html>
<html lang="hu">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>test page</title>
</head>
<body>
<div style="width: 1000px; background:#ff0">hello world</div>
</body>
</html>
It works fine in landscape view, but if I start in portrait... so I doesn't work good. It is zoomed in like landscape view.
What is the best practice?
I just loaded your HTML in a basic WebView and it looks fine to me. Maybe it's an issue with your layout and not with the HTML?
Here is the (very basic) WebView I used:
<?xml version="1.0" encoding="utf-8"?>
<WebView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/webViewMain"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
/>
And here is the onCreate that I used to test your code:
WebView webView;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
webView = (WebView)findViewById(R.id.webViewMain);
webView.getSettings().setJavaScriptEnabled(true);
//webView.loadUrl("http://www.google.com");
String data = "<!DOCTYPE html> <html lang=\"hu\"> <head> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no\"> <title>test page</title> </head> <body> <div style=\"width: 1000px; background:#ff0\">hello world</div> </body> </html>";
webView.loadData(data, "text/html", Encoding.UTF_8.toString());
}
In response to your comment to my comment:
I'm 99% sure the behavior you want is already the default behavior. When you set the width=device-width part of the viewport it will cause the device to behave similar to you simply resizing the browser window on the desktop.
If you remove that part from the content attribute it should behave the way you want.