Dialog full screen gap at the bottom

[Yongkee Cho]

Following your example Show Dialog with full screen in Blazor Dialog Component | Syncfusion

I see a gap at the bottom of the dialog as shown in the picture.

<SfDialog @ref="_dialog" Width="250px" ShowCloseIcon="true" Visible="false">
    <DialogTemplates>
        <Header> Dialog </Header>
        <Content>
            <SfChart @ref=_chart Palettes="@Model.Palettes">
                <ChartTooltipSettings Enable="true" Shared="true" Format="${series.name} : ${point.x} : ${point.y}"></ChartTooltipSettings>
                <ChartCrosshairSettings Enable="true" LineType="LineType.Vertical" />
                <ChartZoomSettings EnableMouseWheelZooming="true" EnablePinchZooming="true" EnableSelectionZooming="true" />
                <ChartPrimaryXAxis Title="@Model.XAxis" ValueType="Syncfusion.Blazor.Charts.ValueType.Double" />
                <ChartSeriesCollection>
                    @foreach (var result in Model.YAxisResults)
                    {
                        <ChartSeries Name="@result" DataSource="@Results" XName="@Model.XAxis" YName="@result" Type="ChartSeriesType.Line" Width="2" />
                    }
                </ChartSeriesCollection>
                <ChartLegendSettings Visible="true" Position="LegendPosition.Top" />
            </SfChart>
        </Content>
    </DialogTemplates>
    <DialogButtons>
        <DialogButton Content="Print" OnClick="@CloseDialog" />
        <DialogButton Content="Download" OnClick="@CloseDialog" />
        <DialogButton Content="Cancel" OnClick="@CloseDialog" />
    </DialogButtons>
</SfDialog>


@code {
    private SfDialog _dialog;
    private SfChart _chart;


    [Parameter]
    public AnalysisDataModel? Model { get; set; }


    [Parameter]
    public ICollection<TResult> Results { get; set; }


    public async Task OpenDialog()
    {
        await _dialog.ShowAsync(true);
    }


    private async Task CloseDialog()
    {
        await _dialog.HideAsync();
    }
}

[Priyanka Karthikeyan]

Hi Yongkee Cho,

To resolve the issue, please set the max-height property to 100% for the dialog popup. Below is the code snippet and a sample for your reference:

 

<style>

    .e-dlg-fullscreen {

        max-height: 100% !important;

    }

</style>

 

 

Sample: https://blazorplayground.syncfusion.com/embed/rXrpXHZqIUdCLyzS?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5

 

Regards,

Priyanka K