Kendo Menu within Kendo Window positioning.

[Thomas]

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: http://dojo.telerik.com/epezo/2

 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: http://dojo.telerik.com/URODA/2.

 ​

[Thomas]

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.

[Konstantin Dikov]

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:

<style>
  div.k-window-content{
    overflow: visible;
  }
</style>

Here is the modified example:

• http://dojo.telerik.com/epezo/3

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
Telerik