akrennmair/ng-pdfviewer

Canvas size problematic

Opened this issue · 2 comments

robhunt3r commented

Canvas size is not 100% it's container, causing visual errors. It is not resizing neither, which is absolutely not responsive...

I'm trying to convert original viewer.js into an angularjs service, but I'm not too experienced with Angular... The far I went is allowing blobs to being rendered instead of only pdf url, removing the SRC attribute of the directive and injecting directly inside my controller...

Any clues on this? It would be cool to make mousewheel and that available too, because ng-pdfviewer is too simple and no browser friendly at all....

petarjs commented

If you want to the rendered pdf to be responsive, just add width: 100% (or so) to the canvas inside of pdfviewer and it will become responsive, maintaining the aspect ratio of the canvas (because the lib sets width and height on the canvas element). You can also do min-width etc.

Zyst commented

Thanks @petarslovic I fixed this in my project by adding the following CSS, with a specific selector to avoid unintended consequences:

/* Bugfix for pdfviewer canvas tomfoolery */
pdfviewer > canvas {
    width: 100%;
}

Works as one would expect.