diff --git a/knowledge-base/images/window-big-screen.gif b/knowledge-base/images/window-big-screen.gif deleted file mode 100644 index 2a21dc86fe..0000000000 Binary files a/knowledge-base/images/window-big-screen.gif and /dev/null differ diff --git a/knowledge-base/images/window-small-screen.gif b/knowledge-base/images/window-small-screen.gif deleted file mode 100644 index b4437255b4..0000000000 Binary files a/knowledge-base/images/window-small-screen.gif and /dev/null differ diff --git a/knowledge-base/window-modal-minimize-popup.md b/knowledge-base/window-modal-minimize-popup.md index d50ca83f7b..7ab375c841 100644 --- a/knowledge-base/window-modal-minimize-popup.md +++ b/knowledge-base/window-modal-minimize-popup.md @@ -1,120 +1,131 @@ --- -title: How to minimize a popup window to the bottom of the page? -description: Is there any way to collapse a window to the bottom of a page and how to create a responsive modal that can be minimized? +title: Minimize a Window to the Bottom Right of the Page +description: Learn how to collapse a Window to the bottom of a page and create a responsive popup that is a chat bubble. type: how-to -page_title: How to minimize a popup window to the bottom of the page? +page_title: How to Minimize a Popup Window to the Bottom Right of the Page slug: window-modal-minimize-popup -position: -tags: window,modal,popup,collapse,minimize -ticketid: 1542823 +tags: blazor, window, minimize +ticketid: 1542823, 1676477 res_type: kb --- ## Environment + - - - - - - + + + + + +
ProductWindow for Blazor
ProductWindow for Blazor
- ## Description -Is there any way to collapse a window to the bottom of a page? How to create a responsive modal that can be minimized? How to minimize Modal Window as a chat for messages? - -## Solution -To implement a responsible popup that can be minimized to the bottom of the page: -1. Set the `Top` and `Left` parameters to control the position of the modal. -2. Use boolean flags to show and hide the popup. -3. Use the [MediaQuery](slug://mediaquery-overview) component to make the modal window responsive. +This KB article answers the following questions: ->caption The result from the code snippet below on a big screen. +* How to minimize the Telerik Window for Blazor to the bottom right? +* How to collapse a Window to the bottom of a page? +* How to create a responsive modal Window that can be minimized? +* How to minimize a modal Window as a chat for messages? -![Blazor Window Big Screen](images/window-big-screen.gif) +## Solution ->caption The result from the code snippet below on a small screen. +### Minimize Window to the Bottom Right -![Blazor Window Small Screen](images/window-small-screen.gif) +To minimize the Window to the bottom-right corner of the viewport: -````Razor -@*Responsive minimizable popup.*@ +1. Set a custom CSS class to the Window with the `Class` parameter, for example, `minimized-at-bottom`. +1. Apply the following styles to the `.k-window-minimized.minimized-at-bottom` CSS combinator: + * `top` and `left` must be `auto !important` + * `bottom` and `right` must be zero or an arbitrary small value + * `transform` must be `none` - +````RAZOR +Toggle Window - + + + + + - @Title + Window Title - @if (isModal) - { - @Content - } + Window Content + + + + + +@code { + private bool WindowVisible { get; set; } = true; +} +```` + +### Create Responsive Chat Window + +To configure a responsive popup Window that transforms to a chat bubble on small screens: + +1. Use the [MediaQuery component](slug://mediaquery-overview) to make the Window responsive and change its configuration, depending on the browser viewport size. +1. Use custom CSS classes and styles to tweak the Window appearance and make it look like a bubble when minimized. + +````RAZOR + + + + @WindowTitle + +

The Window title changes, depending on the browser viewport size.

+

Reduce the browser width and minimize the Window to minimize it as a chart bubble at the bottom-right.

 - -@code { - bool isModalVisible { get; set; } = true; - bool isModal { get; set; } = true; - private bool Small { get; set; } - - string Title => Small == true && !isModal ? "M" : "My Responsive Popup"; - string Content = "---------- Welcome to our Minimized/Collapsed popup! ----------"; - string TopPosition => Small == true && !isModal ? "100px" : Top; - string LeftPosition => Small == true && !isModal ? "300px" : Left; - string Top = "40%"; - string Left = "40%"; - - string myClass => Small == true && !isModal ? "minimized" : ""; - - public void MyCustomMinimize() - { - Top = "90%"; - Left = "15%"; - isModal = false; - StateHasChanged(); + + +@code { + private string WindowClass => IsSmallScreen && WindowState == WindowState.Minimized ? "minimized-at-bottom chat-bubble-window" : ""; + private WindowState WindowState { get; set; } = WindowState.Default; + private string WindowTitle => IsSmallScreen ? "Chat" : "Customer Support Chat"; -@if (!isModal) -{ - + private bool IsSmallScreen { get; set; } } ```` + +## See Also + +* [Window Position](slug://components/window/position)