How to remove the Android WebView print added margin?

Asked 15/9, 2016 at 18:20 Answered 10/7, 2017 at 19:14

android html webview android-webview google-cloud-print

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

Hujsak answered 15/9, 2016 at 18:20 Comment(3)

I don't know if it affects printing but html{margin:0; padding:0;} works miracles. – Glacialist 4/10, 2016 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; } – Unremitting 4/10, 2016 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 – Hujsak 5/10, 2016 at 5:29

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

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

Clarissa answered 10/7, 2017 at 19:14 Comment(1)

Thank you! This fixed it for me! – Cyanic 5/2, 2018 at 9:56

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

Foskett answered 5/10, 2016 at 9:26 Comment(0)

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>

Kathline answered 5/10, 2016 at 6:12 Comment(0)

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

Emulsion answered 5/10, 2016 at 8:14 Comment(0)

Recommended topics

Hot tags