SfDialogService 2nd Dialog not Centered

[Glen Wilkin]

I use DialogService.PromptAsync to get user input, this appears correctly centered. If the user input is invalid I use DialgService.AlertAsync to inform the user, this dialog appears top left. I've tried setting DialogOptions.Position X = "center" Y = "center", but this doesn't have any effect.

[RaivoL]

Hi.

I'm having the exact same issue, using version 23.2.6.

My workaround is adding this between the calls to   DialogService.PromptAsync  and  DialgService.AlertAsync :

 await Task.Delay(100);

//R

[Glen Wilkin]

Thanks, that works but it isn't very nice, is it? The modal overlay flickers between the dialogs being shown.

Syncfusion really should sort this out correctly.

[Kokila Poovendran]

Hi Glen Wilkin

Greeting from Syncfusion support!

Thank you for bringing this issue to our attention, and we appreciate your patience. After further validation, we have determined that the behavior you observed is not a bug at the component level. The issue arises when opening another dialog without properly closing the previous dialog, leading to incorrect positioning.

To resolve this issue and ensure proper positioning, we recommend adding a slight delay before opening the next dialog. This delay allows the previous dialog to close effectively, preventing conflicts when opening subsequent dialogs.

Here is a sample code snippet demonstrating this approach:

<div id="predefinedDialogDefault">

    <SfButton CssClass="e-success" @onclick="@ConfirmBtn">Confirm</SfButton>

    <span class="status">

        @DialogStatus

    </span>

</div>

@code {

    private string DialogStatus { get; set; }

 

    private async Task ConfirmBtn()

    {

        this.DialogStatus = " ";

        bool isConfirm = await DialogService.ConfirmAsync("Are you sure you want to permanently delete these items?", "Delete Multiple Items");

        string confirmMessage = isConfirm ? "confirmed" : "canceled";

        if (isConfirm)

        {

            await Task.Delay(5);

            await DialogService.PromptAsync("Enter your name:", "Join Chat Group");

 

        }

        else

        {

            await Task.Delay(5);

            await DialogService.AlertAsync("10% of battery remaining", "Low Battery");

        }

        this.DialogStatus = $"The user {confirmMessage} the dialog box.";

    }

 

}

If you have any further questions or concerns, please feel free to reach out.

Regards,
Kokila Poovendran.