menu icon indicating copy to clipboard operation
menu copied to clipboard

Positioning Sub Menu

Open jojo-tutor opened this issue 7 years ago • 8 comments

I'm finding a solution to position the Sub Menus directly as a child to a certain Menu, not on a different DOM node. Any ideas ?

jojo-tutor avatar Feb 19 '18 00:02 jojo-tutor

Please provide more details.

benjycui avatar Feb 22 '18 03:02 benjycui

I mean, is there a way that the DOM structure would look like this one?

<ul class="rc-menu rc-menu-root rc-menu-horizontal">    <li class="rc-menu-submenu rc-menu-submenu-horizontal">       <div class="rc-menu-submenu rc-menu-submenu-popup">          <ul class="rc-menu rc-menu-sub rc-menu-vertical">             ...          </ul>       </div>     </li> </ul>

jojo-tutor avatar Feb 23 '18 01:02 jojo-tutor

Try getPopupContainer, see: http://react-component.github.io/menu/#menu-props

benjycui avatar Feb 23 '18 01:02 benjycui

@benjycui, could you provide a pen for this? I don’t see very well how to achieve this. This used to be the default behaviour, and with the update to react 16 this brakes compat.

With the current default solution, it’s not possible to achieve this (submenu top aligned with parents).

screen shot 2018-05-17 at 21 57 13

@picodoth any idea?

borisrorsvort avatar May 17 '18 20:05 borisrorsvort

@borisrorsvort are you talking about the same issue (mount submenu on a particular node) here?

If you're only talking about the position (submenu top aligned with parents) rather than the dom structure, will https://github.com/react-component/menu/pull/112#issuecomment-351105208 help your issue?

picodoth avatar May 20 '18 06:05 picodoth

@picodoth Yep this would solve it. Anyone working on this?

borisrorsvort avatar Jun 02 '18 15:06 borisrorsvort

@borisrorsvort i think #112 could not solve your particular use case, that would be a custom placement config(similar to this: http://yiminghe.me/dom-align/examples/simple.html) for entire menu to specify where the popover should appear relatively to the parent node. However, in your case seems like you have to do a case by case situation since you want the popover always align with the previous menu. It's not easy since the target node(active node) keeps changing

picodoth avatar Jun 09 '18 08:06 picodoth

I am also looking for it. I am writing a chrome extension whose popup page is a cascading menu. The sub menu here doesn't take DOM space, so the popup page won't show the submenus properly. Any suggestions?

likan999 avatar Apr 22 '20 01:04 likan999