I have found the sub menu items will be hidden behind the container while Menu was placed within PanelBar(overflow: auto).
SplitterPane have the same unexpected situation too.
Why the Menu do not just popup the sub menu items as ContextMenu ?
Menu / Context Menu
I hope the next (or next next) release will fix this elementary problem.
*z-index have no effects (because containers overflow: auto).
*containers autoflow: auto are required in my application (don't ask me use overflow: visible or larger width).
7 Answers, 1 is accepted
Actually this is an expected behavior. Context menu is a popup, which is opened by clicking a target which is not part (an item) of the menu. They are two separate objects. Menu is actually a list of items/options. Dropdown of the menu is actually shown list of root items children. For that reason the menu dropdown is wrapped in the same element as its root items.
Setting z-index do not affect overflowing an element. If a parent cuts/hides its DOM children because of overflowing, it cannot be resolved by z-index. Overflowing can simply cuts elements while z-index specifies the stack order. As popup is rendered as a direct child of <body>, it is not child of panelbar/splitter. So it cannot be cut by overflow property applied to those widgets. Menu subitem is rendered as a DOM children placed in the menu, which is child of panelbar/splitter. In this case the element will be cut regardless its stack order (z-index).
I known that '...Setting z-index do not affect overflowing an element. If a parent cuts/hides its DOM children...',
but the answer still unable to solve the problem - Menu in PanelBar(or SplitterPane).
The described difference in the appearance of sub-menu items and sub-context menu items is not a bug to be resolved. As Magdalena explained, sub items of a menu placed inside Splitter/PanelBar will be cut and this is not a bug. It is expected behavior due to the DOM structure in this scenario - Dojo snippet.
I allow myself to answer this topic because I have exactly the same problem, and I would have wanted to know if, 2 years later, it was possible to make a menu which "leaves" the DOM, as for the menus of the grid column headers ?
The difference in the behavior of the Menu sub-menu items and the ContextMenu sub-items is still expected, as explained by Margarita and Dimitar. The scenario demonstrated in the dojo Dimitar shared is still valid today https://dojo.telerik.com/OzoDeZIb In the particular example the ContextMenu popup is rendered as a direct child of <body>, it is not a child of the Splitter. So it is not cut by the overflow property applied to the widgets. The Menu subitem is rendered as a DOM children placed in the menu, which is a child of the Splitter.
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.