Setting maximum height to the Dialog

20 Jul 20221 minute to read

By default, the MaxHeight for the Dialog is calculated based on the target. If the target is not specified externally, the Dialog consider the body as target and will calculate the MaxHeight based on it. We have an option to set the MaxHeight of the Dialog in the OnOpen event.

Index.razor

@using Syncfusion.Blazor.Popups
@using Syncfusion.Blazor.Buttons

<SfButton @onclick="@OpenDialog">Open FullScreen Dialog</SfButton>

<SfDialog @ref="DialogRef" Width="800px" ShowCloseIcon="true" Visible="false">
    <DialogEvents OnOpen="onOpen"></DialogEvents>
    <DialogTemplates>
        <Header> Dialog </Header>
        <Content> This is a Dialog with the MaxHeight property </Content>
    </DialogTemplates>
    <DialogButtons>
        <DialogButton Content="OK" IsPrimary="true" OnClick="@CloseDialog" />
        <DialogButton Content="Cancel" OnClick="@CloseDialog" />
    </DialogButtons>
</SfDialog>

@code {
    SfDialog DialogRef;
    private async Task OpenDialog()
    {
        await this.DialogRef.ShowAsync();
    }
    private async Task CloseDialog()
    {
        await this.DialogRef.HideAsync();
    }
    private void onOpen(BeforeOpenEventArgs args)
    {
        // setting maximum height to the Dialog
        args.MaxHeight = "300px";
    }
}