You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: components/window/position.md
+24-7Lines changed: 24 additions & 7 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -10,12 +10,14 @@ position: 2
10
10
11
11
# Window Position
12
12
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:
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).
19
21
20
22
## ContainmentSelector
21
23
@@ -60,11 +62,17 @@ In this case, the Window will render inside the specified container and not as a
60
62
61
63
## Top and Left
62
64
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.
64
66
65
67
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.
66
68
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
68
76
69
77
````RAZOR
70
78
<p>
@@ -73,24 +81,33 @@ When the [Window `ContainmentSelector` parameter is set](#containmentselector),
73
81
<code>WindowTop</code>: @WindowTop
74
82
</p>
75
83
76
-
<TelerikWindow @bind-Left="@WindowLeft"
84
+
<TelerikWindow @ref="@WindowRef"
85
+
@bind-Left="@WindowLeft"
77
86
@bind-Top="@WindowTop"
78
87
Visible="true"
79
88
Width="300px">
80
89
<WindowTitle>Window</WindowTitle>
81
90
<WindowContent>
82
91
The values of <code>WindowLeft</code> and <code>WindowTop</code> change after the user ends dragging or resizing.
0 commit comments