Resize the SfPdfViewer to fit its container in Blazor
17 Jul 20262 minutes to read
Use the Splitter’s Resizing event to resize the PDF viewer with its container at runtime. In this example, the SfPdfViewer is placed inside a Splitter pane, and UpdateViewerContainerAsync is called during resizing to recalculate the layout. Ensure the container has an explicit height and width (for example, 100%) so the viewer can stretch to fill the available space.
@using Syncfusion.Blazor.SfPdfViewer
@using Syncfusion.Blazor.Layouts
<!--This splitter layout holds two panes-->
<SfSplitter Height="100%" Width="100%">
<SplitterEvents Resizing="@onresize"></SplitterEvents>
<!--Configures one or more panes to construct different layouts-->
<SplitterPanes>
<SplitterPane Size="200px">
<ContentTemplate>
<div> Left pane </div>
</ContentTemplate>
</SplitterPane>
<SplitterPane Size="200px">
<ContentTemplate>
<!--Build the PDF Viewer inside a splitter pane-->
<SfPdfViewer2 @ref="@viewer"
DocumentPath="@DocumentPath">
</SfPdfViewer2>
</ContentTemplate>
</SplitterPane>
</SplitterPanes>
</SfSplitter>
@code
{
private SfPdfViewer2 viewer;
//Sets the document path for initial loading.
private string DocumentPath { get; set; } = "wwwroot/Data/PDF_Succinctly.pdf";
//Triggered when the splitter is resized.
private async Task onresize()
{
//Recalculates the PDF Viewer layout when the container size changes.
await viewer.UpdateViewerContainerAsync();
}
}