kb(Dialog): Add KB for predefined dialog's width (#2430)

* kb(Dialog): Add KB for predefined dialog's width * Update knowledge-base/dialog-dialogfactory-alert-confirm-prompt-width.md Co-authored-by: Iva Stefanova Koevska-Atanasova <[email protected]> --------- Co-authored-by: Iva Stefanova Koevska-Atanasova <[email protected]>
telerik · Oct 17, 2024 · 4744e16 · 4744e16
1 parent 5958601
commit 4744e16
Show file tree

Hide file tree

Showing 2 changed files with 91 additions and 1 deletion.
diff --git a/components/dialog/predefined.md b/components/dialog/predefined.md
@@ -10,7 +10,7 @@ position: 2
 
 # Predefined Dialogs - Alert, Confirm, Prompt
 
-Telerik UI for Blazor provides styled substitutes to the standard alert, confirm, and prompt dialogs of the browser. These Blazor popup messages match the Theme of the components to make it obvious to the user that the modal dialog is coming from your application.
+Telerik UI for Blazor provides styled substitutes to the standard alert, confirm, and prompt dialogs of the browser. These Blazor popup messages match the theme of the components to make it obvious to the user that the modal dialog is coming from your application.
 
 
 ## Using Predefined Dialogs
@@ -195,3 +195,4 @@ The prompt dialog returns a `string` that the user enters when they press `OK`,
 
 * [Live Demo: Predefined Dialogs](https://demos.telerik.com/blazor-ui/dialog/predefined-dialogs)
 * [Using the `<TelerikDialog>` Component Declaratively]({%slug dialog-overview%})
+* [Setting Width to Predefined Dialogs]({%slug dialog-kb-dialogfactory-alert-confirm-prompt-width%})
diff --git a/knowledge-base/dialog-dialogfactory-alert-confirm-prompt-width.md b/knowledge-base/dialog-dialogfactory-alert-confirm-prompt-width.md
@@ -0,0 +1,89 @@
+---
+title: Set Width to Predefined Telerik Dialogs
+description: 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.
+type: how-to
+page_title: How to Set Width to Predefined Telerik Dialogs
+slug: dialog-kb-dialogfactory-alert-confirm-prompt-width
+tags: telerik, blazor, dialog, css, styling
+ticketid: 1667334
+res_type: kb
+---
+
+## Environment
+
+<table>
+    <tbody>
+        <tr>
+            <td>Product</td>
+            <td>Dialog for Blazor</td>
+        </tr>
+    </tbody>
+</table>
+
+## 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
+
+````CSHTML
+<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%})