Popup menu positioning #1054

ryanwawr · 2016-10-11T19:36:44Z

I'm trying to add a popup menu in one of my projects, but the positioning of the menu is way off. I took a look at what was going on in the code, and it seemed like something strange was happening in the call to domHandler.absolutePosition() from menu.show(). It was calculating the correct offsets from the parent element, but, rather than applying the 'top' and 'left' properties relative to the browser window, it applied them relative to the parent element, so my menu was offscreen way to the right of my toggle button, instead of directly beneath it as desired.

When I changed the position attribute from absolute to fixed for .ui-menu-dynamic selector, it positioned the menu correctly, but never set the display attribute back to 'block' after hiding the menu in domHandler.getHiddenElementDimensions(). I'm currently setting the visibility back to block in my own code as a workaround, but it would be nice not to have to resort to that.

Didn't have anything too different from the demo page in terms of my template (below), so not sure why it would be behaving differently, but it certainly is.

<span>
    <p-menu #menu popup="popup" [model]="menuItems"></p-menu>
    <i class="fa fa-bars action-list-icon" (click)="menu.toggle($event)"></i>
</span>

The text was updated successfully, but these errors were encountered:

twmobius · 2016-10-26T12:09:23Z

I think this is a valid point. I tried wrapping the parent div to position: relative to force the absolute position to be relative to parent but didn't work

brian428 · 2016-12-05T16:00:04Z

I had to extend TieredMenu and TieredMenuSub with my own classes and switch to using domHandler.relativePosition() instead of domHandler.absolutePosition(), along with some custom CSS margins for .ui-tieredmenu, to get this to work. Right now, tiered menu positioning is totally broken whenever the component is nested within something like a Dialog. As already pointed out, this seems to be because the positioning is done relative to the parent component instead of the body.

alunacob · 2016-12-13T10:58:28Z

I'm also experiencing this issue. In my case when I attach a menu through a template to the data table component it shows up far away from the expected position.

Prontsevich · 2016-12-29T09:57:05Z

I have the same problem, my menu was offscreen way to the right of my toggle button.

Prontsevich · 2016-12-29T10:17:02Z

Find solution here .
Just add appendTo="body" to p-menu and it will work.

brian428 · 2017-02-09T16:37:15Z

If appendTo="body" works, this needs to be added to the docs and the TSD.

metacoding · 2017-03-19T23:05:01Z

It did not work for me

cagataycivici · 2017-03-23T10:23:58Z

I can't replicate with 2.0.5, feel free to create a new issue ticket with plunkr.

ajshapiro · 2017-04-21T01:18:14Z

I was experiencing this problem when the menu was within a positioned element. The menu is positioned with position: absolute so if it is within a positioned element (not static) such as a position: relative element, it will be positioned relative to that element instead of the body. Adding appendTo="body" to the p-menu element did work for me.

brendanalexdr · 2017-05-03T19:31:16Z

Thanks @ajshapiro that fixed it for me too

super-fun-surf · 2018-12-20T00:47:06Z

I am having this problem in react the menu is showin up way to the right and too low. i cannot use the appendTo="body" with react... any ideas how to fix this with react.

brian428 · 2018-12-20T15:37:37Z

You probably want to post this to the primereact issue tracker. This is the primeng issue tracker, so it's highly unlikely you'll find the answer here.

mjlangan · 2019-01-24T00:34:31Z

I am having this problem in react the menu is showin up way to the right and too low. i cannot use the appendTo="body" with react... any ideas how to fix this with react.

@lucas-wade primereact's Menu has an appendTo prop that accepts a DOMElement. You can pass document.body, for example. FWIW, I'm experiencing a similar issue with primereact and that did not resolve my issue (the issue also seems to be with the absolutePosition() function).

wenikore · 2020-12-22T02:29:20Z

the solution is appendTo = "body" as they indicate in angular 9 for example my dashboard have different div and library css and function

example

<body>
  <div class="wrapper">
   <!--Handle of Dashboard-->
    <div class="content-wrapper">
        <div class="container-fluid">
            <div>
              <router-outlet></router-outlet>----> it  handled different pages
            </div>
        </div>
    </div>
   <!--Handle of Dashboard-->
  </div>
</body>

jonnomk · 2021-01-11T18:34:51Z

The idea of using appendTo="body" works visually until you try to scroll. Now, the menu is not 'attached' to a particular element and the content scrolls 'under' the menu resulting in undesired effects. It would be better to stop scrolling from happening when appendTo body is used. I would simply use this option all the time on that basis.

dsdatta · 2021-03-17T16:04:33Z

The idea of using appendTo="body" works visually until you try to scroll. Now, the menu is not 'attached' to a particular element and the content scrolls 'under' the menu resulting in undesired effects. It would be better to stop scrolling from happening when appendTo body is used. I would simply use this option all the time on that basis.

Can you please suggest a solution where in my case i want to scroll when appendTo='body' is used

xodeeq · 2023-05-11T16:56:27Z

Thank you @Prontsevich . I am using primeNG 16 and appendTo="body" did fix it for me.

Yuri-Lima · 2024-03-19T17:11:14Z

In my none of that works. Unfortunately i had to style in my .scss:
::ng-deep .p-tieredmenu .p-submenu-list { right: 100%; left: unset; }

cagataycivici closed this as completed Mar 23, 2017

anacampesan mentioned this issue Apr 6, 2017

DataTable - contextMenu Appears off centered when it is wrapped in a TabView #1090

Closed

gnowland mentioned this issue Jun 9, 2022

Menu: Popup menu positioning - appendTo primefaces/primereact#2980

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Popup menu positioning #1054

Popup menu positioning #1054

ryanwawr commented Oct 11, 2016

twmobius commented Oct 26, 2016

brian428 commented Dec 5, 2016

alunacob commented Dec 13, 2016

Prontsevich commented Dec 29, 2016

Prontsevich commented Dec 29, 2016

brian428 commented Feb 9, 2017 •

edited

Loading

metacoding commented Mar 19, 2017

cagataycivici commented Mar 23, 2017

ajshapiro commented Apr 21, 2017

brendanalexdr commented May 3, 2017

super-fun-surf commented Dec 20, 2018

brian428 commented Dec 20, 2018

mjlangan commented Jan 24, 2019

wenikore commented Dec 22, 2020 •

edited

Loading

jonnomk commented Jan 11, 2021 •

edited

Loading

dsdatta commented Mar 17, 2021 •

edited

Loading

xodeeq commented May 11, 2023

Yuri-Lima commented Mar 19, 2024

Popup menu positioning #1054

Popup menu positioning #1054

Comments

ryanwawr commented Oct 11, 2016

twmobius commented Oct 26, 2016

brian428 commented Dec 5, 2016

alunacob commented Dec 13, 2016

Prontsevich commented Dec 29, 2016

Prontsevich commented Dec 29, 2016

brian428 commented Feb 9, 2017 • edited Loading

metacoding commented Mar 19, 2017

cagataycivici commented Mar 23, 2017

ajshapiro commented Apr 21, 2017

brendanalexdr commented May 3, 2017

super-fun-surf commented Dec 20, 2018

brian428 commented Dec 20, 2018

mjlangan commented Jan 24, 2019

wenikore commented Dec 22, 2020 • edited Loading

jonnomk commented Jan 11, 2021 • edited Loading

dsdatta commented Mar 17, 2021 • edited Loading

xodeeq commented May 11, 2023

Yuri-Lima commented Mar 19, 2024

brian428 commented Feb 9, 2017 •

edited

Loading

wenikore commented Dec 22, 2020 •

edited

Loading

jonnomk commented Jan 11, 2021 •

edited

Loading

dsdatta commented Mar 17, 2021 •

edited

Loading