Menu and PanelBar - sub menu items hidden behind the container

6 posts, 0 answers
  1. Chris
    Chris avatar
    104 posts
    Member since:
    Oct 2015

    Posted 26 Feb 2018 Link to this post

    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

     

     

     

  2. Magdalena
    Admin
    Magdalena avatar
    487 posts

    Posted 27 Feb 2018 Link to this post

    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.
  3. Chris
    Chris avatar
    104 posts
    Member since:
    Oct 2015

    Posted 01 Mar 2018 in reply to Magdalena Link to this post

    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
  4. Magdalena
    Admin
    Magdalena avatar
    487 posts

    Posted 01 Mar 2018 Link to this post

    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
  5. Chris
    Chris avatar
    104 posts
    Member since:
    Oct 2015

    Posted 01 Mar 2018 in reply to Magdalena Link to this post

    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

     

     

     

  6. Dimitar
    Admin
    Dimitar avatar
    429 posts

    Posted 05 Mar 2018 Link to this post

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