PDF Viewer inside SfDialog. Issues with placement and resizing

[Michael Salzlechner]

I have an SfDialog containing a SfPdfViewerServer

it exhibits all kinds of issues with placement and resizing. 

1) When the dialog comes up the PDF Viewer displays correctly
when clicking on the PDF document the toolbar moves up and half of it is clipped. 
interestingly this does not happen when simulating a mobile device in chrome
(screenshot attached)

2) When resizing is enabled on the dialog the PDF viewer causes the dialog to only resize in width not in height

3) depending on widht/height settings in the PDF viewer the viewer does not properly resize. Scrollbars stay in different locations etc

i would like to be able to have a simply resizable dialog showing a PDF document



<SfDialog 
EnableResize="true"
 IsModal="true" Width="1020px" Height="600px" ShowCloseIcon="true" @bind-Visible="pdfShowing">
    <DialogTemplates>
        <Header>@title</Header>
        <Content>
            <SfPdfViewerServer @ref="pdfViewer" Height="100%" Width="100%"></SfPdfViewerServer>
        </Content>

    </DialogTemplates>
</SfDialog>

[Shamini Kiruba Sobers]

Hi Michael,

We are checking your queries and we will update the details on May 6, 2022.

Regards,

Shamini

[Shamini Kiruba Sobers]

Hi Michael,

This issue occurs when the PDF viewer container is not updated properly while opening the PDF Viewer component within another component. The method UpdateViewerContainerAsync() is needed to refresh the PDF Viewer container when we load the PDF Viewer container inside a component/area of different sizes so that the container will be refreshed to fit into it. In your case, you are loading the PDF Viewer inside a Dialog. Hence, we suggest calling the UpdateViewerContainerAsync() method in the DocumentLoaded event as in the below code snippet and the sample to resolve the reported issue.

Code snippet:

<SfPdfViewerServer @ref="pdfViewer" DocumentPath=@DocumentPath Height="100%" Width="100%">

    <PdfViewerEvents DocumentLoaded="@DocumentLoaded"></PdfViewerEvents>

</SfPdfViewerServer>

 

private void DocumentLoaded(LoadEventArgs args)

{

    pdfViewer.UpdateViewerContainerAsync();

}

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorServer-799662443

Kindly let us know if the suggestion helps. If you are still facing any issues, please share the video screenshot and modified sample to replicate the issue at our end so that we can check at our end and provide a prompt solution at the earliest.

Regards,

Shamini