Skip to content

Latest commit

 

History

History
120 lines (92 loc) · 3.35 KB

window-responsive.md

File metadata and controls

120 lines (92 loc) · 3.35 KB
title description type page_title slug position tags res_type
Responsive Window
How to adjust the size of a Window when the browser window size changes so that it is responsive.
how-to
Responsive Window
window-kb-responsive
kb

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

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).

caption 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>

note 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 @@.

caption Observe the behavior of a Window made responsive with media queries

Component:

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

The Title I am modal so the page behind me is not available to the user. 

````CSS Stylesheet
@* 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