From c1cfc881d760c5e9661afbb07b435120cb574343 Mon Sep 17 00:00:00 2001 From: Dimo Dimov <961014+dimodi@users.noreply.github.com> Date: Tue, 15 Oct 2024 14:05:11 +0300 Subject: [PATCH 1/2] kb(Dialog): Add KB for predefined dialog's width --- components/dialog/predefined.md | 3 +- ...ialogfactory-alert-confirm-prompt-width.md | 89 +++++++++++++++++++ 2 files changed, 91 insertions(+), 1 deletion(-) create mode 100644 knowledge-base/dialog-dialogfactory-alert-confirm-prompt-width.md diff --git a/components/dialog/predefined.md b/components/dialog/predefined.md index 9046d3554c..17d50deae5 100644 --- 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 `` 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 new file mode 100644 index 0000000000..cd91710484 --- /dev/null +++ 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 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 + + + + + + + + +
ProductDialog 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 + +````CSHTML +Show Dialog + +Show DialogFactory Alert + + + + Dialog Component + + +

This Dialog is 33vw wide at all times.

+ + + OK + + + + + +@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%}) From db68ac640eea84666b035c818099484fda765257 Mon Sep 17 00:00:00 2001 From: Dimo Dimov <961014+dimodi@users.noreply.github.com> Date: Thu, 17 Oct 2024 14:22:11 +0300 Subject: [PATCH 2/2] Update knowledge-base/dialog-dialogfactory-alert-confirm-prompt-width.md Co-authored-by: Iva Stefanova Koevska-Atanasova --- .../dialog-dialogfactory-alert-confirm-prompt-width.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/dialog-dialogfactory-alert-confirm-prompt-width.md b/knowledge-base/dialog-dialogfactory-alert-confirm-prompt-width.md index cd91710484..9958280443 100644 --- a/knowledge-base/dialog-dialogfactory-alert-confirm-prompt-width.md +++ b/knowledge-base/dialog-dialogfactory-alert-confirm-prompt-width.md @@ -1,6 +1,6 @@ --- title: Set Width to Predefined Telerik Dialogs -description: Learn how to set width to predefined Telerik Dialogs such as alert, confirm and prompt modal popups. The width can be fixed or a percentage of the browser window's viewport. +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