From cc9bc837cf8c815c4d58cb1f0b71776b0c825014 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 d7491f49ba6ac6522d69876f092581d039d8705c 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