Skip to content

Commit 95a9861

Browse files
committed
chore: apply requested changes
1 parent 7d40b42 commit 95a9861

File tree

2 files changed

+24
-8
lines changed

2 files changed

+24
-8
lines changed

components/window/overview.md

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -171,7 +171,6 @@ In Blazor, however, the render tree structure may be important. In some cases, t
171171
* [Configure the Window position](slug:components/window/position)
172172
* [Set the Window size, minimized, and maximized state](slug:components/window/size)
173173
* [Handle Window events](slug:window-events)
174-
* [Learn How to Programmatically Center the Window](slug:window-kb-center-programmatically)
175174

176175
## See Also
177176

components/window/position.md

Lines changed: 24 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -10,12 +10,14 @@ 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

1515
* [`ContainmentSelector` parameter](#containmentselector)
1616
* [`Top` and `Left` parameters](#top-and-left)
17+
* [Centered Window](#center)
18+
* [Positions Example](#example)
1719

18-
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+
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).
1921

2022
## ContainmentSelector
2123

@@ -60,11 +62,17 @@ In this case, the Window will render inside the specified container and not as a
6062

6163
## Top and Left
6264

63-
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.
65+
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.
6466

6567
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.
6668

67-
>caption Using Top and Left to manage the Window position
69+
### Center
70+
71+
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.
72+
73+
## Example
74+
75+
>caption Use Top and Left to manage the Window position
6876
6977
````RAZOR
7078
<p>
@@ -73,24 +81,33 @@ When the [Window `ContainmentSelector` parameter is set](#containmentselector),
7381
<code>WindowTop</code>: @WindowTop
7482
</p>
7583
76-
<TelerikWindow @bind-Left="@WindowLeft"
84+
<TelerikWindow @ref="@WindowRef"
85+
@bind-Left="@WindowLeft"
7786
@bind-Top="@WindowTop"
7887
Visible="true"
7988
Width="300px">
8089
<WindowTitle>Window</WindowTitle>
8190
<WindowContent>
8291
The values of <code>WindowLeft</code> and <code>WindowTop</code> change after the user ends dragging or resizing.
8392
</WindowContent>
93+
<WindowFooter>
94+
<TelerikButton OnClick="@CenterWindow">Center Window</TelerikButton>
95+
</WindowFooter>
8496
</TelerikWindow>
8597
8698
@code {
99+
private TelerikWindow? WindowRef { get; set; }
87100
private string WindowLeft { get; set; } = "50px";
88-
89101
private string WindowTop { get; set; } = "50px";
102+
103+
private void CenterWindow()
104+
{
105+
WindowLeft = WindowTop = string.Empty;
106+
WindowRef?.Refresh();
107+
}
90108
}
91109
````
92110

93-
94111
## See Also
95112

96113
* [Live Demo: Window Position](https://demos.telerik.com/blazor-ui/window/position)

0 commit comments

Comments
 (0)