This is a migrated thread and some comments may be shown as answers.

Menu and PanelBar - sub menu items hidden behind the container

7 Answers 381 Views
Menu
This is a migrated thread and some comments may be shown as answers.
Chris
Top achievements
Rank 1
Veteran
Iron
Iron
Chris asked on 26 Feb 2018, 07:03 AM

HI

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

https://demos.telerik.com/aspnet-mvc/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).

See attachment.

Best regards

Chris

 

 

 

7 Answers, 1 is accepted

Sort by
0
Magdalena
Telerik team
answered on 27 Feb 2018, 02:24 PM
Hi Chris,

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.

Regards,
Magdalena
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.
0
Chris
Top achievements
Rank 1
Veteran
Iron
Iron
answered on 01 Mar 2018, 08:11 AM
Yes, that is an expected behavior, but control should overcome the problem about z-index (see attachment - Telerik Menu and PanelBar 3.png).

Best regards

Chris
0
Magdalena
Telerik team
answered on 01 Mar 2018, 02:33 PM
Hi Chris,

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).

Regards,
Magdalena 
Progress Telerik
0
Chris
Top achievements
Rank 1
Veteran
Iron
Iron
answered on 02 Mar 2018, 01:56 AM

HI

 

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).

 

Best regards

 

Chris

 

 

 

0
Dimitar
Telerik team
answered on 05 Mar 2018, 02:04 PM
Hi Chris,

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.

Regards,
Dimitar
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.
0
Syleps
Top achievements
Rank 1
Veteran
answered on 18 Feb 2021, 10:51 AM

Hi,

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 ?

Regards

0
Aleksandar
Telerik team
answered on 22 Feb 2021, 09:33 AM

Hi Syleps,

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.

Regards,
Aleksandar
Progress Telerik

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/.

Tags
Menu
Asked by
Chris
Top achievements
Rank 1
Veteran
Iron
Iron
Answers by
Magdalena
Telerik team
Chris
Top achievements
Rank 1
Veteran
Iron
Iron
Dimitar
Telerik team
Syleps
Top achievements
Rank 1
Veteran
Aleksandar
Telerik team
Share this question
or