blazor-docs/knowledge-base/dialog-dialogfactory-alert-confirm-prompt-width.md

title	description	type	page_title	slug	tags	ticketid	res_type
Set Width to Predefined Telerik Dialogs	Learn how to set width to predefined Telerik Dialogs such as the alert, confirm, and prompt modal popups. The width can be fixed or a percentage of the browser window's viewport.	how-to	How to Set Width to Predefined Telerik Dialogs	dialog-kb-dialogfactory-alert-confirm-prompt-width	telerik, blazor, dialog, css, styling	1667334	kb

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]({%slug dialog-overview%}) render a k-dialog CSS class. In addition, the [predefined dialogs]({%slug dialog-predefined%}) 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.

caption 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]({%slug dialog-predefined%})
• [Dialog Component Overview]({%slug dialog-overview%})