This is a migrated thread and some comments may be shown as answers.

Setting size of container

3 Answers 653 Views

PdfViewer

This is a migrated thread and some comments may be shown as answers.

3 Answers, 1 is accepted

answered on 02 Mar 2021, 12:58 PM

Hi Bart,

In general, you can set a relative Height of the RadPdfViewer (in percentage). That way it will be rendered with a height relative to the first of its parents that have fixed height.

<telerik:RadPdfViewer runat="server" ID="RadPdfViewer1" RenderMode="Lightweight" Height="100%" Width="100%"

For instance, if you wrap the PdfViewer in a div element with fixed height and set the Height of the PdfViewer to 100%, the control will occupy completely the div with no additional scrollbar appearing.

Alternatively, you can programmatically set the height of the control with the help of its API. One approach you can try is to use the client-side OnLoad event of the PdfViewer to set its height depending on the height of its parent element:

<ClientEvents OnLoad="onLoad" />

JavaScript

function onLoad(sender, args) {
    resizeViewer(sender);
}
function resizeViewer(pdfViewer) {
    pdfViewer.set_height($(pdfViewer.get_element().parentElement).height());
}

In case this is not helping it would be very helpful if you share the markup of the ASPX page containing the PdfViewer, so we can have a better overview of the concrete case.

Looking forward to hearing from you.

KInd regards,
Doncho
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

answered on 05 Mar 2021, 08:39 AM

screenshot1.png

screenshot2.png

Hi Doncho,

This is my aspx page:

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

<link href="Resources/Stylesheets/Web.css" rel="stylesheet" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.js"></script>

</head>

<body>

<form id="form1" runat="server">

<ASP:SCRIPTMANAGER ID="ScriptManager1" runat="server" />

<div style="width: 100%; height: 100%; position: absolute;">

<table class="width_Height_100Pct">

<colgroup>

<col style="width: 250px;" />

<col />

</colgroup>

<thead>

<tr>

<td colspan="2" class="width_100Pct textAlign_Center" style="border-bottom: 1px solid black;">

<h1>HEN Drawings Viewer</h1>

</td>

</tr>

</thead>

<tbody>

<tr>

<td class="verticalAlign_Top">

<div style="height: 100%; overflow-y: scroll;">

<TELERIK:RADTREEVIEW ID="RadTreeViewFolders" runat="server" OnNodeExpand="RadTreeViewFolders_NodeExpand" OnNodeClick="RadTreeViewFolders_NodeClick" />

</div>

</td>

<td class="verticalAlign_Top" style="border-left: 1px solid black;">

<div class="width_Height_100Pct">

<ASP:LABEL ID="LabelDrawingName" runat="server" Style="display: none;" />

<TELERIK:RADPDFVIEWER ID="RadPdfViewerDrawing" runat="server" Width="100%" Height="100%" RenderMode="Lightweight">

<TOOLBARSETTINGS Items="pager, zoom, toggleSelection, search" />

<DEFAULTPAGESIZESETTINGS Height="0" />

</TELERIK:RADPDFVIEWER>

</div>

</td>

</tr>

</tbody>

</table>

</div>

</form>

</body>

</html>

I have a folder/file treeview on the left and the pdf viewer on the right.

What's happening now is that when I load a pdf in the viewer (by clicking a file in the treeview), the pdf viewer sizes itself to the contents of the pdf. This causes the treeview to scroll beyond the height of the browser window. See screenshot1.

Also, when I zoom the pdf, the whole pdf viewer control resizes. IMO the pdf control should keep the same width and height and show scrollbars inside its window. It even squashes the left column although it is set to a fixed size! See screenshot2.

I hope this clarifies my issue better.

Accepted

answered on 10 Mar 2021, 08:19 AM

RadPdfViewer-Sample.zip

Hi Bart,

Thank you for sharing the code!

I cannot see any absolute height set to the elements in the provided code, so I would assume the goal is to rely on the Viewport height.

In this case, you need to guarantee that the height of the PdfViewer's parent elements is also set. For example:

html, body, form{
    height:99%;
}
.width_Height_100Pct{
    height:100%
}

Since there is no fixed height set to the parent elements of the PdfViewer you can use the second approach I have suggested in my previous message.

For your convenience, I have attached a sample project for you to test. Please give it a try and let me know how it works for you.

Kind regards,
Doncho
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.