On print size reduce to around 75% about ngx-extended-pdf-viewer HOT 12 CLOSED

We have added the following script you mentioned regarding bootstrap in style.scss but did not work in a blank project.

 @media screen {
    @import './../node_modules/bootstrap/scss/bootstrap';
}
´´´

from ngx-extended-pdf-viewer.

"Blank project" meaning a demo project using both Bootstrap and ngx-extended-pdf-viewer, I assume? Can you share the project with me, so I can have a look myself?

from ngx-extended-pdf-viewer.

At the moment I can't recall the details, and I don't have access to my old source code. What I recall from memory is that somewhere in the Bootstrap library, there's a statement reducing the font size. Or the general zoom level. As a result, everything is rendered a little smaller. You won't mind on a web page, but you'll notice immediately when printing a page.

To solve the problem, you have to find the CSS statement downscaling everything.

That proved to be a bit tedious, so I simply deactivated Bootstrap when printing a page. That's what the @media screen query does. It imports Bootstrap if and only if you're viewing the page on a screen.

Alternatively, you can add a media query acting as a counter-poison like so:

@media print {
  font-size: 133%;
}

Does this help you? If so, please report back so I know when I can close the ticket.

Thanks in advance,
Stephan

from ngx-extended-pdf-viewer.

from ngx-extended-pdf-viewer.

I believe I've managed to reproduce your bug. However, it looks more like a 85% reduction (or rather, a reduction by 15% :) ). Does it look similar to my screenshot on your machine?

from ngx-extended-pdf-viewer.

from ngx-extended-pdf-viewer.

Oops - it turned out to be simple. I guess I should improve my documentation. :)

Adding the media query to the global styles.css replaces the import in the Angular.jsonfile:

           "styles": [
              "node_modules/bootstrap/dist/css/bootstrap.css",  <<< remove this line!
              "src/styles.scss"
          ],

from ngx-extended-pdf-viewer.

improved documentation published with version 0.9.17 just a minute ago

from ngx-extended-pdf-viewer.

the suggested solution:
@media screen {
@import './../node_modules/bootstrap/scss/bootstrap';
}
is causing an scss error:
You may not @extend selectors across media queries.

Is there a workaround for this?

from ngx-extended-pdf-viewer.

Instead of this

@media screen {
    @import './../node_modules/bootstrap/scss/bootstrap';
}

You can use this

@media print {
  body {
    min-width: auto !important;
  }
}

from ngx-extended-pdf-viewer.

Whow, is it really that simple? I've added it to the documentation. Thanks for the hint!

Best regards,
Stephan

from ngx-extended-pdf-viewer.

I've went over the print CSS again. When you update to version 9.0.0, I don't know what happens to your bugfix. I hope you won't need it, but I can't predict this.

from ngx-extended-pdf-viewer.