We tries to print a webview content over google cloud print, but no matter what we do the resulted printout adds some margin.
Is there a way to remove this margin?
We tried:
<body style="margin: 0; padding: 0">
then
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
then
mWebView.setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY);
none worked...
Use the following code to remove margins when printing the WebView.
#page{
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 0px;
}
Just Use It *{margin:0px; padding:0px} Add In Your Style Sheet And Check Once
*{margin:0px; padding:0px}
body,html{padding:0px;margin:0px;}
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
By Default HTML web pages have a padding and margin of 10px; You have to set in your head section or or css file:
<style type="text/css">
html, body {
width:100%;
height: 100%;
margin: 0px;
padding: 0px;
}
It's work for me. Hope it will help you :)
or you can try another one:
Replace your tag with this one:
<body style='margin:0;padding:0;'>
Here's another tip for images in a webview: add a styling that fits images in the width of the screen. Works great on all screen sizes:
<style type='text/css'>
img {max-width: 100%;height:initial;} div,p,span,a {max-width: 100%;}
</style>
If using the css doesn't solve your issue, you can try using a TextView with fromHtml instead of using a webview:
TextView myTextView = (TextView) view.findViewById(R.id.my_textview);
Spanned textviewHtml;
//Note : fromHtml needs a display flag as second argument from API 24
if (Build.VERSION.SDK_INT >= 24) {
textviewHtml= Html.fromHtml(yourHtmlHere, Html.FROM_HTML_MODE_COMPACT);
}
else {
textviewHtml= Html.fromHtml(yourHtmlHere);
}
myTextView.setText(textviewHtml);
For more options on fromHtml you can refer to https://developer.android.com/reference/android/text/Html.html
Hope this helps! ;-)
Related
I'm developing a webapp with Cordova. All is fine for the moment except that in one screen, I have a div with this position:
position: absolute;
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
left: 0;
right: 0;
top: 300px;
bottom: 40px;
In my browser (computer or smartphone), the element is correctly positioned but in the built app, the element is something like 10 pixels below.
Here is the meta "viewport":
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, target-densitydpi=device-dpi">
Does anyone can help me for that? I really don't know why the pixels are not respected.
I found the solution. Never use "line-height" to specify the "height" of an element. For some reason, in the built app (not in a browser), the output height of the element is not corresponding to the line-height.
I hope this will help someone...
Check out the following demo on an Android device:
Scrolling Demo
There is a red box that is slightly off screen. When the vertical spacer is not present, you can't drag the page around in any direction. When the spacer is present and taking up more vertical space than the window, you can drag the page down (as expected) however, now you can also drag horizontally.
This only seems to happen on Android browsers. Any clues on what's going on here? I'd like to prevent the horizontal scrolling altogether while retaining vertical scrolling.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" id="viewportMobile" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" type="text/css" href="test.css" />
<style>
html,body {
overflow: hidden;
}
body {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow-y: visible;
overflow-x: hidden;
}
.offscreen {
position: absolute;
right: -20px;
background-color: #ed0021;
padding: 20px 20px 20px 20px;
}
</style>
<script>
var showSpacer=true;
function toggleSpacer() {
showSpacer = !showSpacer;
var spacer = document.getElementById('spacer');
spacer.style.display = showSpacer ? 'block' : 'none';
}
</script>
</head>
<body>
<div class="toggle-button" onClick="toggleSpacer()">Toggle Spacer</div>
<div class="offscreen"></div>
<div id="spacer" style="width:50px; height:2000px; background-color:#444">
</div>
</body>
</html>
Removing the overflow properties and changing the position to relative for the body element worked for me. It should look like this:
body {
position: relative;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
edit: bad copy/paste
edit 2: updated answer
How can I get all images without first class: content.slide0.
In my example I use Jsoup library, which show selectable elements in WebView.
Elements element = doc.select("HERE_SOLUTION");
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>TESTING TITLE</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="css/normalize.min.css">
<link rel="stylesheet" href="css/main.css?4231">
<script src="js/vendor/modernizr-2.6.2.min.js"></script>
<style type="text/css" media="screen">
body {
background: #fe9600 url('images/1389219790_bg2.jpg') no-repeat fixed top center;
}
#content.slide0 {
background: url('img/1234.jpg') no-repeat scroll top left;
width: 970px;
height: 474px;
margin: 0 auto;
}
#content.slide1 {
background: url('images/1235.jpg') no-repeat scroll top left;
width: 970px;
height: 474px;
margin: 0 auto;
}
#content.slide2 {
background: url('images/1236.jpg') no-repeat scroll top left;
width: 970px;
height: 474px;
margin: 0 auto;
}
Jsoup parses HTML but not CSS. Since you are attempting to get images from CSS, you cannot use Jsoup selectors. You should probably use regular expressions.
In you '.*' regex should extract
1. 'img/1234.jpg'
2. 'images/1235.jpg'
3. 'images/1236.jpg'
4. 'images/1389219790_bg2.jpg'
Last one may be unwanted. You can remove this probably checking length of string or so.
Alternatively you can use CSS parser like this.
Hope this helps!
I overlooked all the web ( i guess) and tried to find the solution for this task:
I have all requirements to show a correct content on mobile(I mean meta media and css media and so on), but on my android phone I can scroll to the right. I checked if there are no divs with width more than 320px. Website I'm talking about is http://vasiliib.p.ht/leverage/
I tought this is cause my page content and created a separate page http://vasiliib.p.ht/leverage/mobile.html. Here I inserted simple html code. And, there is the same problem..
I am frustrated .. Please clean my eyes..and show me my mistake, please..
looking forward for your reply.
regards.
<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
This is the correct answer. It works perfectly.
body{
margin:0px;
}
should read:
body{
margin:0 auto;
}
Where are you handling you're responsive design stuff?
Also this:
.bg-course-content-02 {
background-image: url("http://vasiliib.p.ht/leverage/files/css/../img/bg-course-content-02.png");
margin-left: -970px;
width: 923px;
height: 555px;
}
This:
.bg-course-content-04 {
background-image: url("http://vasiliib.p.ht/leverage/files/css/../img/bg-course-content-04.png");
margin-left: -970px;
width: 923px;
height: 555px;
}
and this:
.bg-course-content-06 {
background-image: url("http://vasiliib.p.ht/leverage/files/css/../img/bg-course-content-06.png");
margin-left: -970px;
width: 923px;
height: 555px;
}
check your widths..
Have you included the meta tag inside the head tag of the HTML?
<meta name="viewport" content="width=device-witdh, initial-scale=1">
that meta tag set the width of the page to the width of your device.
It seems that the background-fixed CSS property doesn't work right in Jelly Bean WebView (both inside an application and using the default Android browser).
If I set this property, the background image gets loaded over the content, i.e. the content is behind the background image.
Here's my relevant HTML code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="target-densitydpi=device-dpi">
<meta name="viewport" content="initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="./gesture-background_files/genre-channel-background.css">
<style type="text/css"></style></head>
<body>
<div id="right-keys">
<img src="./gesture-background_files/one.png"><br />
Film24<br />
</div>
<div id="right-keys-vertical">
<img src="./gesture-background_files/one.png"><br />
Film24<br />
</div>
<div id="footer">
MUSCADE<span class="large">EPG</span>
</div>
</body>
</html>
And here's the relevant part of the CSS:
body {
background-image: url(hot-black-background.jpg);
background-color: black;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: bottom left;
}
#right-keys, #right-keys-vertical {
position: absolute;
right: 10px;
width: 100px;
text-align: center;
text-shadow: black 2px 2px 0px;
}
#right-keys img, #right-keys-vertical img {
height: 90px;
margin-bottom: 0;
}
#footer {
position: absolute;
right: 10px;
bottom: 10px;
font-size: 20px;
}
It's a bit long, but the only important part are the background-attachment and background-position properties on top of the CSS file. If I remove those, everything works fine.
Is this a known bug? Can anyone suggest a workaround?
Here's a link to the file so you can try opening it from a Jelly Bean native browser (not Chrome):
http://212.92.197.78/gesture/gesture-background.htm
It turns out that in the Jelly Bean browser if you use
body {
background-image: url(any-image.jpg);
background-attachment: fixed;
background-position: bottom;
}
or anything involving bottom or right for background-position, any elements you position with reference to the right or bottom edge of the screen will be overlaid by the background image.
This is most certainly a bug in Jelly Bean's browser.
Instead of using the above, I put a background image on my page using the following code:
HTML:
<body>
<img id="background" src="any-image.jpg" />
(...)
</body>
CSS:
#background {
z-index: -1;
position: fixed;
bottom: 0;
left: 0;
}
for position related and absolute you can use z-index. Read more about z-index: http://www.w3schools.com/cssref/pr_pos_z-index.asp
On my website, to make the background image to reappear behind the content (on Jelly Bean browser), I only had to remove the css property: background-attachment: fixed.
Zoltan's solution not worked well to me because it makes the background image does not display correctly in some browsers (tested on browserstack)