How to remove the Android WebView print added margin?

Question

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...

I don't know if it affects printing but `html{margin:0; padding:0;}` works miracles. — Adam, Oct 04 '16 at 14:51
This might seem daft, but have you tried with `!important` in the style attribute as well? And same on the root node, `html` i.e. `html, body{ margin: 0 !important; padding:0 !important; }`? Could always set `border` to 0 just in case. Alternatively, perhaps try this in your CSS: `@page{ margin-left: 0px; margin-right: 0px; margin-top: 0px; margin-bottom: 0px; }` — AM Douglas, Oct 04 '16 at 22:15
We tried it all, it seems like the margin is not related to the html but a constant margin the webview is adding when trying to print — Guy Korland, Oct 05 '16 at 05:29

score 9 · Answer 1 · answered Jul 10 '17 at 19:14

9

Use the following code to remove margins when printing the WebView.

@page{
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 0px;
}

answered Jul 10 '17 at 19:14

mihirjoshi

12,161
7
47
78

Thank you! This fixed it for me! – lorenzo-s Feb 05 '18 at 09:56

Samudrala Ramu · Answer 2 · 2016-10-07T09:50:15.637

6

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">

edited Oct 07 '16 at 09:50

answered Oct 05 '16 at 09:26

Samudrala Ramu

2,088
1
15
36

score 1 · Answer 3 · answered Oct 05 '16 at 06:12

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>

score 1 · Answer 4 · edited Jun 20 '20 at 09:12

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! ;-)

How to remove the Android WebView print added margin?

4 Answers4