Dialog does not appear!

[Szoke]

Dear Support !

We were very happy with the new Dialog Service feature, but we can't get it to work.

I share a test project on GIT.:

GIT

Please look at it: why the dialog window does not appear.

Thanks in advance !

[Buvana Sathasivam]

Hi Szoke,

Greetings from Syncfusion support.

We were able to reproduce your reported problem using your shared sample. To solve your problem, you can add the SfDialogProvider component in the MainLayout.razor file.

MainLayout.razor

<div class="main">

    <div class="content px-4">

        @Body

        <Syncfusion.Blazor.Popups.SfDialogProvider />

    </div>

</div>

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/DialogTest-master-836001209

Please let us know if you have any problems.

Regards,

Buvana S

[Szoke]

Dear Buvana!

Thanks, it works with this addition!

We experience 2 interesting things:

1. A scrollbar appears in the body of the dialog.

2. When moving the dialog window, at the start of the drag, when the mouse button is pressed, the dialog window jumps to the left about 400 pixels.

What can be the solution?

[Buvana Sathasivam]

Hi Szoke,

Query #1: “A scrollbar appears in the body of the dialog.”

To solve your problem, you can set the height of the body element to 100%, as shown below.

MainLayout.razor

<style>

   html, body {

       height: 100%;

   }

</style>

Query #2: “When moving the dialog window, at the start of the drag, when the mouse button is pressed, the dialog window jumps to the left about 400 pixels.”

By default, SfDialog component X and Y positions are set as the center of the page, and Width is set as auto. If you resize the window, it will automatically adjust based on the window size. If you wish to change the Width of SfDialog, you can use Dialog Options like the below code.

Index.razor

@code {

 

    private async Task OnBtnClick()

    {

        bool isConfirm = await DialogService.ConfirmAsync("Are you sure you want to permanently delete these items?", "Delete Multiple Items", new DialogOptions { Position =  new PositionDataModel() { X = "center", Y = "top" }, Width= "300px"});

    }

   }

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/DIALOG~21700461077

Please check the above sample and let us know if you have any concerns.

Regards,

Buvana S