Telerik Forums / Kendo UI for jQuery
This is a migrated thread and some comments may be shown as answers.

Destroying a window after maximizing breaks page scrolling

3 Answers 337 Views
Window
This is a migrated thread and some comments may be shown as answers.
Ben
Top achievements
Rank 2
Ben asked on 17 Mar 2016, 02:53 PM

Hello

When calling .maximize() on a Kendo UI window the body and html page elements are given an overflow CSS rule of hidden.

Following this if destroy is called the window disappears but leaves the body/html overflow rule in place. This causes the page to not be scrollable.

Reproduction steps from the kendo dojo:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Untitled</title>
 
 
  <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
   
  </head>
<body>
   
  <div id="window">
    <p>test</p>
  </div>
   
  <p>
   
  <script>
    $(document).ready(function() {
      console.log($("html").css("overflow")); // Visible
       
        var kendoWindow = $("#window").kendoWindow({}).data("kendoWindow");
      kendoWindow.maximize();
      kendoWindow.destroy();
       
      console.log($("html").css("overflow")); // Hidden
    });
  </script>
   
</body>
</html>

Thanks,

Ben

3 Answers, 1 is accepted

Sort by
0
Dimiter Topalov
Telerik team
answered on 21 Mar 2016, 12:28 PM
Hi Ben,

To avoid the described undesired effect, you can first close the Kendo UI Window programmatically (if needed) and destroy it in the deactivate event handler:

// Kendo UI Window configuration
...
deactivate: function(e){
  e.sender.destroy();
}
...

I hope this helps.

Regards,
Dimiter Topalov
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Morten
Top achievements
Rank 2
Iron
Iron
Iron
answered on 18 Oct 2017, 05:19 AM

Hi Dimiter

I have a similar problem and the "e.sender.destroy();" does not work for me.

Please see other thread https://www.telerik.com/forums/bug-window-open-removes-vertical-scroll-bar-of-calling-page#PtD0oeKl3E6fkhw5sSRdIw

Hope you can help.

A work-a-round for me is to set width and height to almost 100% and center window.

Thanks in advance.

Best regards

Morten

0
Plamen
Telerik team
answered on 19 Oct 2017, 11:50 AM
Hello,

It looks like a bug in /window widget. I have logged it here. You can use the following CSS to fix the issue:
.k-resize-ne,
    .k-resize-se,
    .k-resize-e {
      right: 0;
    }

Here is a dojo page that worked correctly at my side.

Regards,
Plamen
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Window
Asked by
Ben
Top achievements
Rank 2
Answers by
Dimiter Topalov
Telerik team
Morten
Top achievements
Rank 2
Iron
Iron
Iron
Plamen
Telerik team
Share this question
or