Skip to content

Commit 87f0803

Browse files
Tsvetomir-HrTsvetomir-Hr
authored
docs(Window): remove centered parameter (#2826)
* docs(Window): remove center parameter * chore: apply requested changes * chore: polish article
1 parent 2b4048b commit 87f0803

File tree

2 files changed

+27
-41
lines changed

2 files changed

+27
-41
lines changed

‎components/window/overview.md

+1-2
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ You can make the Window component responsive and allow it to adapt to different
5656

5757
## Position
5858

59-
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.
59+
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.
6060

6161
Read more about the [Blazor Window position...](slug:components/window/position)
6262

@@ -84,7 +84,6 @@ The following table lists the Window parameters. Also check the [Window API](slu
8484

8585
| Parameter | Type and Default Value | Description |
8686
| --- | --- | --- |
87-
| `Centered` | `bool` <br /> (`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. |
8887
| `Class` | `string` | The custom CSS class of the `<div class="k-window">` element. Use it to [override theme styles](slug:themes-override). Here is a [custom Window styling example](slug:window-kb-custom-css-styling). |
8988
| `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. |
9089
| `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. |

‎components/window/position.md

+26-39
Original file line numberDiff line numberDiff line change
@@ -10,44 +10,13 @@ position: 2
1010

1111
# Window Position
1212

13-
The Window offers several ways to control its position:
13+
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:
1414

15-
* [`Centered` parameter](#centered)
1615
* [`ContainmentSelector` parameter](#containmentselector)
1716
* [`Top` and `Left` parameters](#top-and-left)
17+
* [Example](#example)
1818

19-
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).
20-
21-
22-
## Centered
23-
24-
The `Centered` parameter determines if the Window displays centered in the viewport. The parameter value is `true` by default.
25-
26-
A centered Window applies the following CSS styles, which maintain the centered position even if the viewport size changes:
27-
28-
````CSS.skip-repl
29-
.k-centered {
30-
top: 50%;
31-
left: 50%;
32-
transform: translate(-50%, -50%);
33-
}
34-
````
35-
36-
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`.
37-
38-
>caption Center the Window
39-
40-
````RAZOR
41-
<TelerikWindow Centered="true" Visible="true">
42-
<WindowTitle>
43-
Window Title
44-
</WindowTitle>
45-
<WindowContent>
46-
A Centered Window
47-
</WindowContent>
48-
</TelerikWindow>
49-
````
50-
19+
The Window renders [in the root of the application](slug:window-overview#important-notes) or in its containment element.
5120

5221
## ContainmentSelector
5322

@@ -92,11 +61,19 @@ In this case, the Window will render inside the specified container and not as a
9261

9362
## Top and Left
9463

95-
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.
64+
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.
9665

9766
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.
9867

99-
>caption Using Top and Left to manage the Window position
68+
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).
69+
70+
### Center
71+
72+
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.
73+
74+
## Example
75+
76+
>caption Use Top and Left to manage the Window position
10077
10178
````RAZOR
10279
<p>
@@ -105,25 +82,35 @@ When the [Window `ContainmentSelector` parameter is set](#containmentselector),
10582
<code>WindowTop</code>: @WindowTop
10683
</p>
10784
108-
<TelerikWindow @bind-Left="@WindowLeft"
85+
<TelerikWindow @ref="@WindowRef"
86+
@bind-Left="@WindowLeft"
10987
@bind-Top="@WindowTop"
11088
Visible="true"
11189
Width="300px">
11290
<WindowTitle>Window</WindowTitle>
11391
<WindowContent>
11492
The values of <code>WindowLeft</code> and <code>WindowTop</code> change after the user ends dragging or resizing.
11593
</WindowContent>
94+
<WindowFooter>
95+
<TelerikButton OnClick="@CenterWindow">Center Window</TelerikButton>
96+
</WindowFooter>
11697
</TelerikWindow>
11798
11899
@code {
100+
private TelerikWindow? WindowRef { get; set; }
119101
private string WindowLeft { get; set; } = "50px";
120-
121102
private string WindowTop { get; set; } = "50px";
103+
104+
private void CenterWindow()
105+
{
106+
WindowLeft = WindowTop = string.Empty;
107+
WindowRef?.Refresh();
108+
}
122109
}
123110
````
124111

125-
126112
## See Also
127113

128114
* [Live Demo: Window Position](https://demos.telerik.com/blazor-ui/window/position)
129115
* [Live Demo: Constrain Window Movement](https://demos.telerik.com/blazor-ui/window/constrain-movement)
116+
* [How to Center the Window Programmatically](slug:window-kb-center-programmatically)

0 commit comments

Comments
 (0)