Destroying a window after maximizing breaks page scrolling

4 posts, 0 answers
  1. Ben
    Ben avatar
    12 posts
    Member since:
    Oct 2015

    Posted 17 Mar 2016 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
    635 posts

    Posted 21 Mar 2016 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. Morten
    Morten avatar
    304 posts
    Member since:
    Jul 2012

    Posted 18 Oct in reply to Dimiter Topalov Link to this post

    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

  4. Plamen
    Admin
    Plamen avatar
    2818 posts

    Posted 19 Oct Link to this post

    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.
Back to Top