Skip to content

Merge new-kb-window-center-horizontally-fixed-top-7cd6a4c96595443f8e0aabec75e081a0-2594 into production #2605

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 1 commit into from
Dec 4, 2024
Merged

Merge new-kb-window-center-horizontally-fixed-top-7cd6a4c96595443f8e0aabec75e081a0-2594 into production #2605

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
68 changes: 68 additions & 0 deletions knowledge-base/window-center-horizontally-fixed-top.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
---
title: Center Telerik Window Horizontally and Keep Fixed Top Position
description: Learn how to center a Telerik Window only horizontally while keeping it at a fixed distance from the top in Blazor applications.
type: how-to
page_title: How to Center Telerik Window Horizontally with a Fixed Top Position in Blazor
slug: window-kb-center-horizontally-fixed-top
tags: window, center horizontally, positioning, blazor, fixed top
res_type: kb
ticketid: 1672113
---

## Environment
<table>
<tbody>
<tr>
<td>Product</td>
<td>Window for Blazor</td>
</tr>
</tbody>
</table>

## Description

I want to center a Telerik Window horizontally in my Blazor application but keep it at a fixed distance from the top without using JavaScript for calculations.

This knowledge base article answers the following questions:
- How can I center a Telerik Window only horizontally in Blazor?
- Is it possible to position a Telerik Window at a fixed distance from the top in Blazor while centering it horizontally?

## Solution

To center a Telerik Window horizontally while maintaining a fixed distance from the top, follow these steps:
1. Apply a [custom CSS class]({%slug themes-override%}) to the Window.
1. Use this CSS class to set the initial top value, manage the horizontal centering and override the default vertical transformation.

>caption Telerik Blazor Window Centered Horizontally with Fixed Top Value

````CSHTML
<TelerikButton OnClick="@( () => WindowVisible = !WindowVisible )">Toggle Window</TelerikButton>

<style>
.k-centered.centered-top {
top: 100px;
transform: translate(-50%, -0);
}
</style>

<TelerikWindow @bind-Visible="@WindowVisible"
Class="centered-top" >
<WindowActions>
<WindowAction Name="Minimize" />
<WindowAction Name="Close" />
</WindowActions>
<WindowTitle>
Window Title
</WindowTitle>
<WindowContent>
Window Content
</WindowContent>
</TelerikWindow>

@code {
private bool WindowVisible { get; set; } = true;
}
````

## See Also
- [Telerik Window for Blazor - Overview]({%slug window-overview%})
Loading