Skip to content

docs(Window): remove centered parameter #2826

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Mar 27, 2025
Merged

docs(Window): remove centered parameter #2826

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7d40b42
docs(Window): remove center parameter
Tsvetomir-Hr Mar 12, 2025
95a9861
chore: apply requested changes
Tsvetomir-Hr Mar 27, 2025
6dd4589
chore: polish article
Tsvetomir-Hr Mar 27, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 1 addition & 2 deletions components/window/overview.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)

Expand Down Expand Up @@ -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` <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. |
| `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). |
| `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. |
Expand Down
65 changes: 26 additions & 39 deletions components/window/position.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,44 +10,13 @@ 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:

* [`Centered` parameter](#centered)
* [`ContainmentSelector` parameter](#containmentselector)
* [`Top` and `Left` parameters](#top-and-left)
* [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).


## 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
<TelerikWindow Centered="true" Visible="true">
<WindowTitle>
Window Title
</WindowTitle>
<WindowContent>
A Centered Window
</WindowContent>
</TelerikWindow>
````

The Window renders [in the root of the application](slug:window-overview#important-notes) or in its containment element.

## ContainmentSelector

Expand Down Expand Up @@ -92,11 +61,19 @@ 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
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.

## Example

>caption Use Top and Left to manage the Window position

````RAZOR
<p>
Expand All @@ -105,25 +82,35 @@ When the [Window `ContainmentSelector` parameter is set](#containmentselector),
<code>WindowTop</code>: @WindowTop
</p>

<TelerikWindow @bind-Left="@WindowLeft"
<TelerikWindow @ref="@WindowRef"
@bind-Left="@WindowLeft"
@bind-Top="@WindowTop"
Visible="true"
Width="300px">
<WindowTitle>Window</WindowTitle>
<WindowContent>
The values of <code>WindowLeft</code> and <code>WindowTop</code> change after the user ends dragging or resizing.
</WindowContent>
<WindowFooter>
<TelerikButton OnClick="@CenterWindow">Center Window</TelerikButton>
</WindowFooter>
</TelerikWindow>

@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)
* [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)
Loading