From 7d40b42ceb24fb4791c211b17e8432756ba28750 Mon Sep 17 00:00:00 2001 From: Tsvetomir Hristov <106250052+Tsvetomir-Hr@users.noreply.github.com> Date: Wed, 12 Mar 2025 13:08:29 +0200 Subject: [PATCH 1/3] docs(Window): remove center parameter --- components/window/overview.md | 4 ++-- components/window/position.md | 33 +-------------------------------- 2 files changed, 3 insertions(+), 34 deletions(-) diff --git a/components/window/overview.md b/components/window/overview.md index 23d8440c4..c07089819 100644 --- a/components/window/overview.md +++ b/components/window/overview.md @@ -56,7 +56,7 @@ You can make the Window component responsive and allow it to adapt to different ## Position -You can set the position of the Window with the `Top` and `Left` parameters. The component features a boolean `Centered` parameter, which is `true` by default when `Top` and `Left` are not set. The Window component also provides a `ContainmentSelector` parameter that can limit resizing and dragging within the boundaries of a specified container. +You can set the position of the Window with the `Top` and `Left` parameters. The Window component also provides a `ContainmentSelector` parameter that can limit resizing and dragging within the boundaries of a specified container. Read more about the [Blazor Window position...](slug:components/window/position) @@ -84,7 +84,6 @@ The following table lists the Window parameters. Also check the [Window API](slu | Parameter | Type and Default Value | Description | | --- | --- | --- | -| `Centered` | `bool`
(`true`) | Determines if the Window displays in the middle of the viewport. This parameter is ignored if `Top` or `Left` is set to a non-empty string. | | `Class` | `string` | The custom CSS class of the `
` element. Use it to [override theme styles](slug:themes-override). Here is a [custom Window styling example](slug:window-kb-custom-css-styling). | | `CloseOnOverlayClick` | `bool` | Sets if a modal Window will close when the user clicks on the modal overlay that covers the rest of the page content. | | `ContainmentSelector` | `string` | A CSS selector that points to a unique HTML element on the page. The Window will render inside the specified container. Window resizing and dragging will be restricted by the boundaries of the specified container. Do not use `ContainmentSelector` with modal Windows. | @@ -172,6 +171,7 @@ In Blazor, however, the render tree structure may be important. In some cases, t * [Configure the Window position](slug:components/window/position) * [Set the Window size, minimized, and maximized state](slug:components/window/size) * [Handle Window events](slug:window-events) +* [Learn How to Programmatically Center the Window](slug:window-kb-center-programmatically) ## See Also diff --git a/components/window/position.md b/components/window/position.md index 52b13d46b..f38c485ad 100644 --- a/components/window/position.md +++ b/components/window/position.md @@ -12,43 +12,11 @@ position: 2 The Window offers several ways to control its position: -* [`Centered` parameter](#centered) * [`ContainmentSelector` parameter](#containmentselector) * [`Top` and `Left` parameters](#top-and-left) The Window renders [in the root of the application](slug:window-overview#important-notes) or in its [containment element](#containmentselector). If the app is using special CSS positioning, margins, or other offsets on the Window ancestors, these CSS styles may [affect the position of the Window](slug:troubleshooting-general-issues#wrong-popup-position). - -## Centered - -The `Centered` parameter determines if the Window displays centered in the viewport. The parameter value is `true` by default. - -A centered Window applies the following CSS styles, which maintain the centered position even if the viewport size changes: - -````CSS.skip-repl -.k-centered { - top: 50%; - left: 50%; - transform: translate(-50%, -50%); -} -```` - -If the `Top` or `Left` parameters are set and not empty, they take precedence over `Centered`. To center the Window dynamically through its `Centered` parameter, bind the `Top` and `Left` parameters too, so you can reset them to `string.Empty` or `null`. - ->caption Center the Window - -````RAZOR - - - Window Title - - - A Centered Window - - -```` - - ## ContainmentSelector By default, users can drag and resize the Window without constraints. You can restrict the Window's visual position to the boundaries of a specific container: @@ -127,3 +95,4 @@ When the [Window `ContainmentSelector` parameter is set](#containmentselector), * [Live Demo: Window Position](https://demos.telerik.com/blazor-ui/window/position) * [Live Demo: Constrain Window Movement](https://demos.telerik.com/blazor-ui/window/constrain-movement) +* [How to Center the Window Programmatically](slug:window-kb-center-programmatically) From 95a9861e4ecb25ab8de124fda185f1b2e7cdf407 Mon Sep 17 00:00:00 2001 From: Tsvetomir Hristov <106250052+Tsvetomir-Hr@users.noreply.github.com> Date: Thu, 27 Mar 2025 11:49:04 +0200 Subject: [PATCH 2/3] chore: apply requested changes --- components/window/overview.md | 1 - components/window/position.md | 31 ++++++++++++++++++++++++------- 2 files changed, 24 insertions(+), 8 deletions(-) diff --git a/components/window/overview.md b/components/window/overview.md index c07089819..79a797697 100644 --- a/components/window/overview.md +++ b/components/window/overview.md @@ -171,7 +171,6 @@ In Blazor, however, the render tree structure may be important. In some cases, t * [Configure the Window position](slug:components/window/position) * [Set the Window size, minimized, and maximized state](slug:components/window/size) * [Handle Window events](slug:window-events) -* [Learn How to Programmatically Center the Window](slug:window-kb-center-programmatically) ## See Also diff --git a/components/window/position.md b/components/window/position.md index f38c485ad..d9f73cef7 100644 --- a/components/window/position.md +++ b/components/window/position.md @@ -10,12 +10,14 @@ position: 2 # Window Position -The Window offers several ways to control its position: +The Telerik Window component provides multiple options to control its position, allowing you to customize its placement and behavior to suit your application's layout and requirements. This article contains the following sections: * [`ContainmentSelector` parameter](#containmentselector) * [`Top` and `Left` parameters](#top-and-left) +* [Centered Window](#center) +* [Positions Example](#example) -The Window renders [in the root of the application](slug:window-overview#important-notes) or in its [containment element](#containmentselector). If the app is using special CSS positioning, margins, or other offsets on the Window ancestors, these CSS styles may [affect the position of the Window](slug:troubleshooting-general-issues#wrong-popup-position). +The Window renders [in the root of the application](slug:window-overview#important-notes) or in its containment element. If the application is using special CSS positioning, margins, or other offsets on the Window ancestors, these CSS styles may [affect the position of the Window](slug:troubleshooting-general-issues#wrong-popup-position). ## ContainmentSelector @@ -60,11 +62,17 @@ In this case, the Window will render inside the specified container and not as a ## Top and Left -The `Top` and `Left` parameters control the Window placement on the page. The resulting position depends on the whole page content and not on the viewport or the current scroll offset. +The `Top` and `Left` parameters control the Window placement on the page. The resulting position depends on the whole page content and not on the viewport or the current scroll offset. To see the parameters in action, refer to the [example](#example) below. When the [Window `ContainmentSelector` parameter is set](#containmentselector), the `Top` and `Left` parameters apply with regard to the top-left corner of the containment element. ->caption Using Top and Left to manage the Window position +### Center + + The Telerik Window is automatically centered when the `Top` and `Left` parameters are not set or are explicitly set to `string.Empty`. To see this behavior in action, refer to the [example](#example) below. + +## Example + +>caption Use Top and Left to manage the Window position ````RAZOR

@@ -73,7 +81,8 @@ When the [Window `ContainmentSelector` parameter is set](#containmentselector), WindowTop: @WindowTop

- @@ -81,16 +90,24 @@ When the [Window `ContainmentSelector` parameter is set](#containmentselector), The values of WindowLeft and WindowTop change after the user ends dragging or resizing. + + Center Window + @code { + private TelerikWindow? WindowRef { get; set; } private string WindowLeft { get; set; } = "50px"; - private string WindowTop { get; set; } = "50px"; + + private void CenterWindow() + { + WindowLeft = WindowTop = string.Empty; + WindowRef?.Refresh(); + } } ```` - ## See Also * [Live Demo: Window Position](https://demos.telerik.com/blazor-ui/window/position) From 6dd45893cf73a9942fa3363222ffa032b37e555b Mon Sep 17 00:00:00 2001 From: Tsvetomir Hristov <106250052+Tsvetomir-Hr@users.noreply.github.com> Date: Thu, 27 Mar 2025 16:55:13 +0200 Subject: [PATCH 3/3] chore: polish article --- components/window/position.md | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/components/window/position.md b/components/window/position.md index d9f73cef7..774276a46 100644 --- a/components/window/position.md +++ b/components/window/position.md @@ -14,10 +14,9 @@ The Telerik Window component provides multiple options to control its position, * [`ContainmentSelector` parameter](#containmentselector) * [`Top` and `Left` parameters](#top-and-left) -* [Centered Window](#center) -* [Positions Example](#example) +* [Example](#example) -The Window renders [in the root of the application](slug:window-overview#important-notes) or in its containment element. If the application is using special CSS positioning, margins, or other offsets on the Window ancestors, these CSS styles may [affect the position of the Window](slug:troubleshooting-general-issues#wrong-popup-position). +The Window renders [in the root of the application](slug:window-overview#important-notes) or in its containment element. ## ContainmentSelector @@ -66,6 +65,8 @@ The `Top` and `Left` parameters control the Window placement on the page. The re When the [Window `ContainmentSelector` parameter is set](#containmentselector), the `Top` and `Left` parameters apply with regard to the top-left corner of the containment element. +If the application is using special CSS positioning, margins, or other offsets on the Window ancestors, these CSS styles may [affect the position of the Window](slug:troubleshooting-general-issues#wrong-popup-position). + ### Center The Telerik Window is automatically centered when the `Top` and `Left` parameters are not set or are explicitly set to `string.Empty`. To see this behavior in action, refer to the [example](#example) below.