We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Strange Behavior in Predefined Dialogs in the Blazor Dialog Component

Hello !

I am trying to use  Predefined dialogs in the Blazor Dialog component.

When I run the following code, some strange behavior appear...

When I press the OK button of the dialog, the vertical scroll of the entire page disappears !

When I press the CLOSE button or ESCape key, everything is normal and the vertical scroll bar of the page is back in place.

I am using Visual Studio 2022, .NET 6 and Firefox 108.0.1 (64-bit).

Can you tell me what is wrong ?

Thank You Very Much !

@page "/alerttest"

@using Blazored.Toast.Configuration

@using Syncfusion.Blazor.Popups

@inject SfDialogService DialogService

@inherits LayoutComponentBase


        <button @onclick="MyAlertFunction">Alert</button>


<SfGrid DataSource="@Orders" @ref="Grid" AllowGrouping="true" AllowPaging="true" Height="800">

    <GridEvents TValue="Order"></GridEvents>


        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn>

        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn>

        <GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn>

        <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn>




    SfGrid<Order> Grid;

    public List<Order> Orders { get; set; }

    protected override void OnInitialized()


        Orders = Enumerable.Range(1, 275).Select(x => new Order()


            OrderID = 1000 + x,

            CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],

            Freight = 2.1 * x,

            OrderDate = DateTime.Now.AddDays(-x),



    public class Order


        public int? OrderID { get; set; }

        public string CustomerID { get; set; }

        public DateTime? OrderDate { get; set; }

        public double? Freight { get; set; }


    private async Task MyAlertFunction()


        var VAR_ALERT_TITLE = "Warning !";

        var VAR_ALERT_TEXT = "Input value is incorrect ! ";

        await AlertBtn(VAR_ALERT_TITLE, VAR_ALERT_TEXT);


    private async Task AlertBtn(string VAR_ALERT_TITLE, string VAR_ALERT_TEXT)


                    await DialogService.AlertAsync(VAR_ALERT_TEXT, VAR_ALERT_TITLE,

                        new DialogOptions()


                            ShowCloseIcon =true,




4 Replies

VY Vinothkumar Yuvaraj Syncfusion Team December 28, 2022 02:08 PM UTC

Hi Tom Johnes,

We have logged the reported issue as a bug on our end, and a fix will be included in our patch release scheduled for the end of January 2023. You can track the status of the issue by using the below feedback link.

Feedback Link :  https://www.syncfusion.com/feedback/40086/the-vertical-scroll-disappears-when-you-click-the-dialog-ok-button

Disclaimer: “Inclusion of this solution in the weekly release may change due to other factors including but not limited to QA checks and works reprioritization.”



PR prostoyturak January 6, 2023 02:02 PM UTC

A temporary solution is paste the css code to page. Scroll bars always will be visible. Even on dialog is appeared.

 .e-dlg-target.e-scroll-disabled {

        overflow: visible !important;


VJ Vinitha Jeyakumar Syncfusion Team January 9, 2023 04:45 AM UTC

Hi prostoyturak,

Thanks for your suggested solution.


VJ Vinitha Jeyakumar Syncfusion Team February 9, 2023 05:58 AM UTC

Hi Tom,

We have included the fix for the issue "The vertical scroll disappears when you click the dialog OK button" with our package version 20.4.43. So, can you please upgrade your package to the latest to resolve the issue from your end.

Release noteshttps://blazor.syncfusion.com/documentation/release-notes/20.4.43?type=all#dialog


Live Chat Icon For mobile
Up arrow icon