PDF Viewer not taking the full height of the browser window

[David Evans]

Hello, I have the PDF Viewer set up to preview a generated pdf on a separate browser tab. It works fine, but the pdf view does not take up the entire height of the page. I have a screenshot and the relevant code below. I've tried setting the height to 100%. That doesn't work.
Is it possible for the pdf to take up the full height of the browser window so the user doesn't need to scroll?

Thanks

@if(_renderViewer)
{
     <SfPdfViewer2 @ref="_pdfViewer" DocumentPath="@_documentPath"></SfPdfViewer2>
}

@code {
    SfPdfViewer2 _pdfViewer;
    public string _documentPath = "";
    private string _base64DataPrefix = "data:application/pdf;base64,";
    private bool _renderViewer = false;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            string base64String = await LocalStorageService.GetItemAsync("workOrderPdf");
            RenderPdfViewer(base64String);
        }
    }

    private void RenderPdfViewer(string base64String)
    {
        if (base64String is not null)
            _documentPath = $"{_base64DataPrefix}{base64String}";
        _renderViewer = true;
        StateHasChanged();
    }
}

[Sinthiya Kalimuthu]

Is it possible for the pdf to take up the full height of the browser window so the user doesn't need to scroll?

You can achieve your requirement by using the ZoomMode API.   <SfPdfViewer2 @ref="viewer" DocumentPath="@DocumentPath" ZoomMode="ZoomMode.FitToPage" Height="100%" Width="1070px"> </SfPdfViewer2>

Kindly refer to it and revert to us if you have any concerns about it.

Regards,

Sinthiya K

[Yosef Mahmood]

The issue here is the actual control is not filling the full height of the container, despite Height="100%" being set (see the area under the red line in the example).  Height only seems to work by directly setting the size eg. 900px.  Width=100% seems to work as intended.  

[Visvesvar Venkatesan]

Hi Yosef,

Yes, To extend the height of the PDF Viewer container, adjust the container's height and configure the PDF document to container height, match by setting the ZoomMode to "ZoomMode.FitToWidth."

Regards,

Visvesvar K V 

[Yosef Mahmood]

Hi Visvesvar.  Thanks for your response.  Is there a reason why, after adjusting the container height, that the PDF document viewer does not automatically fill to the container height when using Height=100%?  This does seem like a bug.

[Visvesvar Venkatesan]

Hi Yosef,

We've established a parent div element to contain the PDF Viewer, wherein we've defined a minimum height of 500px. Therefore, when we designate the maximum height as 100%, the PDF Viewer container adapts to a height of 500px. This behavior is not a bug, and for your reference, we've included an attached image.

If you want to increase the PDF Viewer container height increase by providing the height value.

Regards,

Visvesvar K V 

[Yosef Mahmood]

Hi Visvesvar.  Thanks for confirming, we will manually set a height on the control.

[Umesh Ranathunga]

Hi Team,

I'm getting the same issue with SfPdfViewer2

@layout BlankLayout

<div style="min-height:900px;background-color:aqua">

    <SfPdfViewer2 @ref="@Viewer"

                  Height="100%"

                  Width="100%"

                  DocumentPath="@_documentPath"

                  ToolbarSettings="@ToolbarSettings"

                  ZoomMode="ZoomMode.FitToPage" />

</div>

Here the aqua color is the div which is set to 900px of height.

browser: ms edge

Syncfusion.Blazor.SfPdfViewer  Version="23.2.7

.net7

Can you please look into this issue?
thanks.

[Sinthiya Kalimuthu]

Setting the min-height value for the parent div and subsequently setting the child element's height to 100% won't take effect unless the parent div also has a height attribute specified. This behavior is inherent in HTML. To resolve the reported issue, we must add the height attribute to the parent div as well. We have shared the code snippet for your reference. Kindly refer to it and revert to us if you have any concerns about it.

Code snippet:

<div style="min-height:900px;height:900px;background-color:aqua">

    <SfPdfViewer2 @ref=Viewer

                  DocumentPath="@DocumentPath"

                  Height="100%"

                  Width="100%">

    </SfPdfViewer2>

</div

Thanks,

Sinthiya K

[John Strever]

Hey all i figured out how to do this
(for my specific setup - Blazor WASM + Bootstrap 5)...

has one fixed row height,
and the second row grows to the rest of the space,
and the PDF Viewer in the second row uses the entire growing row height dynamically default..dynamically !!

It grew the entire height

Row 1 is fixed height

Row 2 dynamically grows to window height
Hope this works for your specific setup

[Sathiyaseelan Kannigaraj]

Hi ,

We reviewed the provided code snippet, but it doesn't cover the entire window; instead, it adds two scroll bars inside the viewer. We believe the code snippet shared by our engineer will better meet the requirements to cover the entire screen.

Regards,
Sathiyaseelan K 

[Wilbur Cocom]

This worked great. Thanks!

[Venkada Subramanian Durai]

Hi Wilbur Cocom,

Thanks for the update. Please ping us if you need any assistance or have any additional requirements.