Search code examples
angularsassngx-extended-pdf-viewer

Angular ngx-extended-pdf-viewer disable media print properties

I want to show a pdf inside a dialog with the ngx-extended-pdf-viewer component (https://www.npmjs.com/package/ngx-extended-pdf-viewer). Pdf shows up correctly. Now my problem is that the pdf viewer itself uses some media queries. If the width is smaller than 700px some buttons will disappear and will show up in an extended button.

The width of the pdf viewer is fixed, so it will scroll when media is getting smaller. So I don't need the media settings for the media viewer anymore. How can I disable them in my Angular 5 application?

I tried to set the encapsulation to viewEncapsulation.None with this code: 

@media (max-width : 700px) {
    #outerContainer .hiddenMediumView {
        display: inherit;
    }
}

This is the code that is used inside the library for getting a smaller width. 

@media (max-width: 700px)
#outerContainer .hiddenMediumView {
    display: none;
}
Solution

  • Update July 17, 2019: I've just published ngx-extended-pdf-viewer 1.0.0-rc.1. This version should solve your problem. Now you can choose between two strategies to implement responsive design: a pure CSS approach (set [ignoreResponsiveCSS]="false") and an approach powered by JavaScript (set [ignoreResponsiveCSS]="true"). Plus, the flat has a sensible default. The CSS approach is preferred, and the JavaScript approach is only chosen by default if the PDF viewer doesn't span the entire width of the window. For example, if there's a side menu, the native CSS rules are useless, so the JavaScript engine is used.

    Original answer: Oops. I'm the author of ngx-extended-pdf-viewer, and I didn't even imagine the media queries might get in your way. Adding insult to injury, I've started to migrate the media queries to JavaScript, so even the notorious !important hack won't help you.

    Please open a ticket on https://github.com/stephanrauh/ngx-extended-pdf-viewer/issues. My offer: I can finish migrating the media queries to JavaScript. That, in turn, allows me to add an option to switch them off completely. Does this help you? Any other ideas?