Set Width to Predefined Telerik Dialogs

Environment

Product

Dialog for Blazor

Description

This KB answers the following questions:

• How to specify a width style to the predefined Telerik Blazor Dialogs, such as AlertAsync()?
• How to apply dimensions to modal popups that are used through the Telerik DialogFactory cascading parameter?
• How to define a width of predefined dialogs that are a percentage of the browser window viewport?

Solution

All Telerik Blazor Dialogs render a k-dialog CSS class. In addition, the predefined dialogs render a k-alert CSS class. Use this distinguishing CSS class to target popups that are generated by the Telerik DialogFactory and apply CSS styles.

Set width to Telerik Blazor DialogFactory modal popups

<TelerikButton OnClick="@( () => DialogVisible = true )">Show Dialog</TelerikButton>

<TelerikButton OnClick="@ShowDialogFactoryPopup">Show DialogFactory Alert</TelerikButton>

<TelerikDialog @bind-Visible="@DialogVisible"
               Width="33vw"
               ButtonsLayout="@DialogButtonsLayout.End">
    <DialogTitle>
        Dialog Component
    </DialogTitle>
    <DialogContent>
        <p>This Dialog is 33vw wide at all times.</p>
    </DialogContent>
    <DialogButtons>
        <TelerikButton ThemeColor="@ThemeConstants.Button.ThemeColor.Primary"
                       OnClick="@( () => DialogVisible = false )">OK</TelerikButton>
    </DialogButtons>
</TelerikDialog>

<style>
    /* This CSS rule will affect only DialogFactory popups */
    .k-dialog.k-alert {
        min-width: 300px !important; /* overrides an inline style */
        width: 33vw;
        max-width: 500px;
    }
</style>

@code {
    [CascadingParameter]
    public DialogFactory? TelerikDialogs { get; set; }

    private bool DialogVisible { get; set; }

    private async Task ShowDialogFactoryPopup()
    {
        if (TelerikDialogs != null)
        {
            await TelerikDialogs.AlertAsync(@"This Dialog is 33vw wide, but with min/max restrictions.
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ultricies congue dolor vel aliquet.
        Nunc ac enim neque. Suspendisse facilisis porta laoreet.
        Sed suscipit mauris lectus, ut porttitor velit porta vitae.
        Suspendisse potenti. Quisque auctor ac ante at egestas.", "Alert Dialog");
        }
    }
}

See Also

• Predefined Telerik Dialogs
• Dialog Component Overview