Responsive Window

Environment

Product

Window for Blazor

Description

When the user resizes the browser window you may want to have the window resized with the new dimensions, so it is also responsive.

Solution

The following examples show how you can make responsive Window:

• Dimensions set in percent
• CSS media queries

Dimensions set in percent

Generally, the Width and Height parameters of the Window can take values in %, vw or vh, and the window will render according to the dimensions of its parent element (which is the TelerikRootComponent which should match the browser viewport).

Observe the behavior of a Window with set Width and Height in %

<TelerikWindow Modal="true"
               Visible="true"
               Width="40%"
               Height="40%">
    <WindowTitle>
        <strong>The Title</strong>
    </WindowTitle>
    <WindowContent>
        I am modal so the page behind me is not available to the user.
    </WindowContent>
    <WindowActions>
        <WindowAction Name="Minimize" />
        <WindowAction Name="Maximize" />
        <WindowAction Name="Close" />
    </WindowActions>
</TelerikWindow>

The Width and Height parameters render as inline CSS styles, meaning that they will have the highest priority. If you want to override them in a stylesheet (see below) you must use the !important statement.

CSS media queries

You can change the dimensions of the window based on the viewport size through media queries, not only through percentage units.

If you want to use the CSS media queries, you have to create a separate CSS file under the wwwroot folder. This is required because the media queries start with @ which conflicts with the Razor syntax. Technically, you could escape them as @@.

Observe the behavior of a Window made responsive with media queries

Component:

RAZOR

@* The Class parameter is set to make cascading the styles easier *@

<TelerikWindow Modal="true"
               Visible="true"
               Class="myWindow">
    <WindowTitle>
        <strong>The Title</strong>
    </WindowTitle>
    <WindowContent>
        I am modal so the page behind me is not available to the user.
    </WindowContent>
    <WindowActions>
        <WindowAction Name="Minimize" />
        <WindowAction Name="Maximize" />
        <WindowAction Name="Close" />
    </WindowActions>
</TelerikWindow>

CSS

@* The myWindow class used in the media queries is the same as in the Class parameter *@
@* Add the CSS file in the _Host.cshtml *@

@media only screen and (min-width: 992px) {
    .myWindow{
        max-width: 800px;
    }
}

@media only screen and (min-width: 576px) and (max-width: 992px) {
    .myWindow {
        width: 500px;
    }
}

@media only screen and (min-width: 300px) and (max-width: 576px) {
    .myWindow {
        width: 350px;
    }
}

See also:

• Documentation Window for Blazor | Size