1

How can I remove the scrollbar while I print report in Chrome Browser. Here is my code:

<style>
     @media print {
         @page {
             size: A4 portrait;
             margin:1cm;
         }
</style>

Here is the picture:

enter image description here

Abdullah Al Zuhair
  • 41
  • 1
  • 9

2 Answers2

3

This is the solution I found:

 @media print{
            @page {
                size: A4 portrait;
                margin:1cm;
            }
            ::-webkit-scrollbar {
                display: none;
            }
        }
Abdullah Al Zuhair
  • 41
  • 1
  • 9
1

overflow: hidden is the css property you are looking for. It removes the scrollbar and removes overflowing content. See: https://developer.mozilla.org/en/docs/Web/CSS/overflow

<style>
     @media print{
         @page {
             size: A4 portrait;
             margin:1cm;
             overflow: hidden;
            }
     }
</style>

Or try to set the overflow hidden without depending on the media query: 

html { overflow: hidden; }

If this does not help for printing, maybe have a look at the answer of following question: How to hide the scroll bar and with the content ramaining scrollable?

As mentioned there you could try to set the width of the scrollbar to zero for webkit browsers.

Andre
  • 4,185
  • 5
  • 22
  • 32
  • Check this solution: https://stackoverflow.com/questions/42268436/how-to-hide-the-scroll-bar-and-with-the-content-ramaining-scrollable – Andre Sep 11 '19 at 09:57
  • I found the solution from here: https://stackoverflow.com/questions/42268436/how-to-hide-the-scroll-bar-and-with-the-content-ramaining-scrollable. – Abdullah Al Zuhair Sep 11 '19 at 10:07