From 4489b8533277462efeedc24b78be1e944a9f14c5 Mon Sep 17 00:00:00 2001 From: Svetoslav Dimitrov Date: Thu, 30 Apr 2020 18:01:00 +0300 Subject: [PATCH 1/2] (kb): Added responsive window KB --- knowledge-base/window-responsive.md | 118 ++++++++++++++++++++++++++++ 1 file changed, 118 insertions(+) create mode 100644 knowledge-base/window-responsive.md diff --git a/knowledge-base/window-responsive.md b/knowledge-base/window-responsive.md new file mode 100644 index 0000000000..dc992d7de5 --- /dev/null +++ b/knowledge-base/window-responsive.md @@ -0,0 +1,118 @@ +--- +title: Responsive Window +description: How to adjust the size of a Window when its container or the browser window size changes +type: how-to +page_title: How to make a responsive Window +slug: window-kb-responsive +position: +tags: +res_type: kb +--- + +## Environment + + + + + + + +
ProductWindow for Blazor
+ + +## Description + +When the user resizes the browser window you may want to have the window resized with the new dimensions. + + + +## Solution + +The following examples show how you can make responsive Window: +* [Dimensions set in percent](#dimensions-set-in-percent) +* [CSS media queries](#css-media-queries) + +### Dimensions set in percent +Generally, the `Width` and `Height` parameters of the Window can take values in `%`, and the chart will render according to the dimensions of its parent element. + +This works well for the initial rendering and the chart will be "responsive" immediately according to your layout, regardless of the display (desktop, tablet, phone). + +>note When being rendered those parameters will be inline CSS styles, meaning that they will have the highest priority. If you want to override them you must use the `!important` statement. + +>caption Observe the behavior of a Window with set `Width` and `Height` in `%` + +````CSHTML +@* The Width and Height parameters are set to 40% *@ + + + + The Title + + + I am modal so the page behind me is not available to the user. + + + + + + + +```` +### CSS media queries + +If you want to use the CSS media queries you have to create a separate CSS file under the wwwroot. This is required because the media queries start with @ which conflicts with the Razor syntax. + +>caption Observe the behavior of a Window made responsive with media queries + +**Component:** +````CSHTML +@* 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 file:** + +````CSHTML +@* 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]({%slug components/window/size%}) From 30208837f489b0f8498e3fad8edbd72c127e94f8 Mon Sep 17 00:00:00 2001 From: Marin Bratanov Date: Thu, 30 Apr 2020 21:17:16 +0300 Subject: [PATCH 2/2] chore(window): improve responsive window kb --- knowledge-base/window-responsive.md | 30 ++++++++++++++--------------- 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/knowledge-base/window-responsive.md b/knowledge-base/window-responsive.md index dc992d7de5..2905230688 100644 --- a/knowledge-base/window-responsive.md +++ b/knowledge-base/window-responsive.md @@ -1,8 +1,8 @@ --- title: Responsive Window -description: How to adjust the size of a Window when its container or the browser window size changes +description: How to adjust the size of a Window when the browser window size changes so that it is responsive type: how-to -page_title: How to make a responsive Window +page_title: Responsive Window slug: window-kb-responsive position: tags: @@ -22,7 +22,7 @@ res_type: kb ## Description -When the user resizes the browser window you may want to have the window resized with the new dimensions. +When the user resizes the browser window you may want to have the window resized with the new dimensions, so it is also responsive. @@ -32,18 +32,14 @@ The following examples show how you can make responsive Window: * [Dimensions set in percent](#dimensions-set-in-percent) * [CSS media queries](#css-media-queries) -### Dimensions set in percent -Generally, the `Width` and `Height` parameters of the Window can take values in `%`, and the chart will render according to the dimensions of its parent element. -This works well for the initial rendering and the chart will be "responsive" immediately according to your layout, regardless of the display (desktop, tablet, phone). +### Dimensions set in percent ->note When being rendered those parameters will be inline CSS styles, meaning that they will have the highest priority. If you want to override them you must use the `!important` statement. +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 `%` ````CSHTML -@* The Width and Height parameters are set to 40% *@ - ```` + + +>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 -If you want to use the CSS media queries you have to create a separate CSS file under the wwwroot. This is required because the media queries start with @ which conflicts with the Razor syntax. +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:** -````CSHTML +````Component @* The Class parameter is set to make cascading the styles easier *@ ```` - -**CSS file:** - -````CSHTML +````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 *@