MaxWidth, MaxHeight + MinWidth, MinHeight Parameters for TelerikWindow

Progress® Telerik® UI for Blazor Feedback Portal

Create an account Log In

Back to Feed

Request a Feature Report a Bug

Completed

Last Updated: 08 Mar 2022 05:53 by ADMIN

René

Created on: 08 Feb 2021 10:50

Category: Window

Type: Feature Request

MaxWidth, MaxHeight + MinWidth, MinHeight Parameters for TelerikWindow

The Window-Component provides parameters for setting width and height.

In addition to that, it would be great if parameters for MaxWidth, MaxHeight + MinWidth, MinHeight would be provided.

I'm especially missing a MaxHeight parameter for creating popups that grow with the content (only known at runtime) but do not become larger than the screen.
To make sure that the whole content is reachable by the users I'm setting the Height to 95vh but this leaves white space if there is not enough content to fill the screen.

Regards,

René

4 comments

ADMIN

Joana

Posted on: 08 Mar 2022 05:53

Hello everyone,

This feature request was completed with ot 3.1.0 release and you can find all release notes below:

https://www.telerik.com/support/whats-new/blazor-ui/release-history/ui-for-blazor-3-1-0

Regards,
Joana
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

ADMIN

Marin Bratanov

Posted on: 08 Feb 2021 12:45

Hello René,

I am just trying to evaluate the situation. I am mostly asking because in our WebForms suite we implemented properties for min/max height/width and they weren't really popular, and using CSS there was much harder to achieve the same result.

That said, I've changed the status of this to "Unplanned" because I also believe such functionality has value, so you and everyone else can Vote on this and Follow its status.

Regards,
Marin Bratanov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

René

Posted on: 08 Feb 2021 12:37

Hello Marin,

to stop the window-components to be larger than the screen, the class-parameter of the component would indeed be a valid way to go, since I want none of the windows in my application to leave the screen.

In other cases though I want to limit the size of a single window-component only and for that I'm not a fan of creating another css-class (and for now would probably go with limiting the size of a div within the window with an inline-style).

Just because something can be done with css should not be a reason to not offer an alternative using component parameters. Example: the width and height of the window can easily be set using css but still you offer width and height parameters - and that's good, because the main reason to use blazor is to get rid of most of the javascript and css stuff.

That being said, it's not a crucial feature but a nice to have in my opinion.

ADMIN

Marin Bratanov

Posted on: 08 Feb 2021 11:11

Hi René,

You can use CSS for that through the Class the component exposes. I am adding an example below. Would you rather have a different way to do this, considering how reusable this is (you could even affect all the windows in your app without a single property on any of them)? You can also find some more examples in this KB article: Responsive Window.

<style>
    .my-limited-window-size {
        min-height: 300px;
        min-width: 300px;
        max-height: 500px;
        max-width: 500px;
    }
</style>

<TelerikWindow Visible="true" Class="my-limited-window-size">
    <WindowTitle>My window title</WindowTitle>
    <WindowContent>
        <div style="width: @Width; height: @Height; background: yellow;">
            <TelerikButton OnClick="@( () => Height = "200px" )">Set small height</TelerikButton>
            <TelerikButton OnClick="@( () => Width = "200px" )">Set small width</TelerikButton>
            <TelerikButton OnClick="@( () => Height = "2000px" )">Set LARGE height</TelerikButton>
            <TelerikButton OnClick="@( () => Width = "2000px" )">Set LARGE width</TelerikButton>
            <p>The min and max sizes are 300 by 500px for this window</p>
        </div>
    </WindowContent>
</TelerikWindow>

@code{
    string Width { get; set; }
    string Height { get; set; }
}

Regards,
Marin Bratanov
Progress Telerik