Destroying a window after maximizing breaks page scrolling

2 posts, 0 answers
  1. Ben
    Ben avatar
    10 posts
    Member since:
    Oct 2015

    Posted 17 Mar Link to this post

    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

  2. Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    349 posts

    Posted 21 Mar Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
Back to Top