Kendo Menu within Kendo Window positioning.

3 posts, 0 answers
  1. Thomas
    Thomas avatar
    2 posts
    Member since:
    Dec 2014

    Posted 30 Jul 2015 Link to this post

    I have a kendo menu inside of a kendo window and would like the menu to draw over top of the window. 
    Here is an example:

     The problem is that the menu expands within the window, the desired behaviour is for it to expand over the window in a similar way as this drop down list in this link:


  2. Thomas
    Thomas avatar
    2 posts
    Member since:
    Dec 2014

    Posted 30 Jul 2015 in reply to Thomas Link to this post

    Here is the code in the two links in case they don't work.
    Menu.​html is demonstrates the problem, the menu opens up and pushes against it's container.

    Dropdown.html demonstrates the desired behaviour.

  3. Konstantin Dikov
    Konstantin Dikov avatar
    1744 posts

    Posted 03 Aug 2015 Link to this post

    Hi Thomas,

    The behavior that you are observing is expected, because the Menu is rendered within the Window widget and the overflow property of the window's content element is set to "auto", which will force the window to display a scrollbar if the content exceeds the size of the wrapping container.

    In the DropDownList example, the drop down element is rendered outside the window (as a child of the BODY element) and it is positioned over the SPAN element of the DropDownList widget, which is the reason for the different behavior. 

    With the above in mind, you could try to override the overflow property of the content element of the window with the following:
        overflow: visible;

    Here is the modified example:
    However, you should have in mind that if you resize the window, if the size is smaller than the initially calculated one, the content will move outside the window. 

    Another approach for handling this would be to set the position property of the Menu to "fixed" and manually calculate and position it over the window.

    Best Regards,
    Konstantin Dikov
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top