Hi,
I have a table with a header and 2 columns. In the left column I'm loading a pdftreeview with a lot of entries. This is scrolling neatly inside its column.
In the right column I'm loading the pdfviewer to show pdf files that are clicked in the tree view.
I don't want any scroll bars in the pdfviewer column. I want it to size automatically to its available space in that column.
I have already set the FitToWindow in client side script. But the container where the pdf is loaded in causes the windows to scroll.
Can the height be adjusted so it takes up the available space, without scroll bars?
3 Answers, 1 is accepted
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/.
Rank 1
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.
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.