Positioning in Predefined Dialogs in Blazor

11 Aug 20225 minutes to read

Customize the dialog position by using the DialogOptions.Position property. The position can be represented with specific X and Y values.

• The PositionDataModel.X can be configured with a left, center, right, or offset value. By default, the value is set as center.
• The PositionDataModel.Y can be configured with a top, center, bottom, or offset value. By default, the value is set as center.

Use the following code snippet for alert.razor, confirm.razor and prompt.razor to customize the position. Here, customized the dialog position as X= “top” and Y= “center”.

alert.razor

@using Syncfusion.Blazor.Buttons
@using Syncfusion.Blazor.Popups
@inject SfDialogService DialogService
    <div>
        <SfButton @onclick="@AlertBtn">Alert</SfButton>
    </div>
@code {

    private async Task AlertBtn()
    {
        await DialogService.AlertAsync("10% of battery remaining", "Low Battery", new DialogOptions()
        {
            Position = new PositionDataModel() { X = "center", Y = "top" },
        });
    }
}

confirm.razor

@using Syncfusion.Blazor.Popups
@using Syncfusion.Blazor.Buttons
@inject SfDialogService DialogService
    <div>
       <SfButton @onclick="@ConfirmBtn">Confirm</SfButton>
    </div>
@code {
        private async Task ConfirmBtn()
        {
            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" },
            });
    }
}

prompt.razor

@using Syncfusion.Blazor.Popups
@using Syncfusion.Blazor.Buttons
@inject SfDialogService DialogService
    <div>
         <SfButton @onclick="@PromptBtn">Prompt</SfButton>
    </div>
@code {
    private async Task PromptBtn()
    {
        string promptText = await DialogService.PromptAsync(null, "Join Wi-Fi network", new DialogOptions()
        {
            Position = new PositionDataModel() { X = "center", Y = "top" },
            ChildContent = @<table class="Table">
                    <tbody>
                        <tr>
                            <td>SSID:</td>
                        </tr>
                        <tr>
                            <td><b>AndroidAP</b></td>
                        </tr>
                        <tr>
                            <td>Password:</td>
                        </tr>
                        <tr>
                            <td>
                                <span class="e-input-group">
                                    <input type="password" id="password" name="Required" class="e-input">
                                </span>
                            </td>
                        </tr>
                    </tbody>
                </table>
        });
    }
}

Results from the code snippet

Alert

Confirm

Prompt