Multiple page pdf overflowing

[Michael]

Using PDFViewer and pdfjs processing in my view, the pdf file, once loaded in view the toolbar shows 6 pages, but the pdf content flows outside the containers as one long image, with all 6 pages shown.

Anyway to contain just one page at a time, or keep the content in a container?

Thanks,

MK

[Dimitar]

Hello Michael,

A similar example to the one described is demonstrated in the following PDF Viewer Demo for ASP.NET Core:

• PDFViewer Basic Usage.

Important to note is that the Height option of the widget should be set, as well as the width of the wrapper:

@(Html.Kendo().PDFViewer().Name("pdfviewer")
  .PdfjsProcessing(pdf => pdf.File(Url.Content("~/shared/web/pdfViewer/sample.pdf")))
  .Height(1200)
)

<style>
    html body #pdfviewer {
        width: 100% !important;
    }
</style>

Using the above approach should correctly render the viewer in the desired container and prevent the pages from overflowing.

Regards,
Dimitar
Progress Telerik

[Michael]

It seems easy enough, but to no avail...however I still have 6 pages outside of the widget.

When inspecting the resulting page, everything seems to fall within the PDF Viewer widget EXCEPT:

<div class="k-canvas k-list-scroller" tabindex="0"> coming in at a size of "938 x 6336"

the parent PDFViewer container:

<div id="pdfviewer" name="pdfviewer" data-role="pdfviewer" class="k-pdf-viewer k-widget" tabindex="0" style="width: 1000px; height: 700px;"> with shows dimensions as "940x700"

Here is my View:

@using Kendo.Mvc.UI
<script src="~/js/pdf.js"></script>
<script>
    window.pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.worker.js';
</script>
<div>
    @(Html.Kendo().PDFViewer().Name("pdfviewer")
      .PdfjsProcessing(pdf => pdf.File(Url.Content("~/CTI_TEST.pdf")))
      .Height(700)
    )
</div>
<style>
    html body #pdfviewer {
        width: 100% !important;
    }
</style>

[Dimitar]

Hello Michael,

I am attaching a sample ASP.NET Core solution, where a similar configuration of the PDFViewer is demonstrated. With it, I am not able to reproduce the described issue with the height of the widget container.

Could you test the example and verify if it is working correctly on your end?

Regards,
Dimitar
Progress Telerik

[Michael]

Thanks Dimitar,

It does stay within the widget with your demo and my pdf file. When I cut/paste your view into my project it reverts back to going outside the widget container...

I must have something in my shared views that is impacting it?

I will look deeper on my end...using VS2019, ASP.NET Core 2.3...

Mike

[Michael]

I have had no success. I am running Bootstrap V3.1.7, does that have any impact on this display (the demo references BS Version 4.1.3)? Is there html results I can post that might help?

Mike

[Martin]

Hello Michael,

I changed the Bootstrap reference to 3.1.1 and the widget still works correctly on my side. Could you please send me the project which reproduces the overflowing of the pages? I will be able to test it and hopefully discover the cause of the issue.

I am looking forward to your reply.

Regards,
Martin
Progress Telerik

[Michael]

I think this is resolved. I believe I was missing a call to kendo.common.bootstrap.css file, placed it in file (at bottom of my css listings) and PDFViewer pages correctly.

Thanks for inputs