The window attempts to resize on close forcing you to close it twice

Progress® Telerik® UI for Blazor Feedback Portal

Create an account Log In

Back to Feed

Request a Feature Report a Bug

Completed

Last Updated: 27 Feb 2023 12:43 by ADMIN

Release 4.1.0 (15/03/2023)

Tony

Created on: 13 Feb 2023 19:10

Category: Window

Type: Bug Report

The window attempts to resize on close forcing you to close it twice

Seems to be a bug in the 4.0.1 release that causing a resizing event to fire as a window is closed - this means that you have to close the window twice.

This appears when the text exceeds the width of the pop up causing it to wrap. In the attached example, the yellow highlighted text is too long for the window. Shorter texts that don't wrap don't seem to cause the issue.

This bug is repeatable in your demo code:

@page "/"

<h1>Hello, world!</h1>

Welcome to your new app.<br />

<TelerikButton OnClick="@SayHelloHandler" ThemeColor="@(ThemeConstants.Button.ThemeColor.Primary)">Say Hello</TelerikButton>

<br />

@helloString

<TelerikButton OnClick="@ButtonClicked" Title="Open Window">Open Window</TelerikButton>

<TelerikWindow @bind-Visible="@IsLearnMoreWindowVisible"
MaxHeight="90%"
MaxWidth="90%"
Modal="true"
Centered="true">
<WindowTitle>
<strong>Learn More: Something</strong>
</WindowTitle>
<WindowContent>
@(new MarkupString("<p>What is the form called? Will appear in the Header to show the user what they are looking at. Any spaces in the name will be stripped during code generation for T-SQL.</p>"))
</WindowContent>
<WindowActions>
<WindowAction Name="Close" OnClick="@(() => IsLearnMoreWindowVisible = false)"></WindowAction>
</WindowActions>
</TelerikWindow>

@code {
MarkupString helloString;
bool IsLearnMoreWindowVisible = false;

void SayHelloHandler()
{
string msg = string.Format("Hello from <strong>Telerik Blazor</strong> at {0}.<br /> Now you can use C# to write front-end!", DateTime.Now);
helloString = new MarkupString(msg);
}

void ButtonClicked()
{
IsLearnMoreWindowVisible = true;
}
}

1 comment

ADMIN

Dimo

Posted on: 14 Feb 2023 10:07

Hi Tony,

Thanks for the runnable example. Indeed, the described Window expansion is a regression in version 4.0. It's easy to fix and changes will take effect in release 4.1, which is due in early March. Please excuse us for the trouble. I awarded you some Telerik points and I am also converting your ticket to a pubilc bug report.

On a side note, does the Window have a Width in your real-world app? If not, the same behavior will persist when clicking on the titlebar. Here is why:

A Window with no Left setting is Centered by default. This applies predefined left and transform CSS styles, which do not require JavaScript calculations.
As soon as the user presses the titlebar, the Window assumes dragging, so it removes the mentioned predefined centering styles.
When the predefined "center" styles are removed, the width-less Window will expand as much as it can until its content fully expands or until the Window reaches the right browser window boundary. This behavior is not intentional - it's how width-less absolutely positioned elements work when there is no CSS transformation.

So to prevent this unexpected resizing, I recommend one of the following:

Set Draggable="false"
Set a Width. If you wish that to be fluid and dependent on the screen size, then use a viewport unit., for example Width="60vw".

Regards,
Dimo
Progress Telerik

Learn about the important changes coming in UI for Blazor 4.0 in January 2023!