Primeng: P-context menu position is not coming correct

[alok1234567]

I am using the P-dialogue of the primeng with the tab menu and it worked fine for the nested context menu also (while opening up the different modal pop up).
but the position is not coming correct when I use the context menu with the dynamically loaded component which have below component.
-dialogue box and inside that we have the context menu.
if I use the appendTo=body then it worked fine (position looked fine) but the click event of the context menu is not working.
Please help me for the same.

[huseyinturkmenoglu]

I used together dialogue box and contex menu.The position is coming correct.

Try the sample code below.

<div class="content-section implementation">
    <p-contextMenu [global]="true" [model]="items1"></p-contextMenu>
    <p-contextMenu [target]="img" [model]="items2"></p-contextMenu> 
    <p-dialog header="Godfather I" [(visible)]="display" modal="modal" [responsive]="true" [width]="300" [minWidth]="200">
        <span>The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding. 
          His beloved son Michael has just come home from the war, but does not intend to become part of his father's business. 
           Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,  kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.</span>
        <p-footer>
            <button type="button" pButton icon="fa-check" (click)="display=false" label="Yes"></button>
            <button type="button" pButton icon="fa-close" (click)="display=false" label="No"></button>
          </p-footer>
    </p-dialog>
    <button type="button" (click)="showDialog()" pButton icon="fa-external-link-square"  label="Show"></button>
</div>

I hope it helps.

Regard,

[mahesh5b5]

If I remove all the bootstrap classes like .col-md-12 and container then the context menu works absolutely fine. But I can ruin my UI by removing all these. Please someone help me out. I have installed 4.2 version of PRIMENG but no hope..

[cagataycivici]

Unable to replicate, please provide a test case based on plunkr below and we'll review again.

http://plnkr.co/edit/6q5v84DWolH6DeAdi70w?p=preview

[Dharmik8478]

I am facing same issue when the component is included in other component. I think it count it's top/left css from the new included component's top/left css inside the main component.

[ctrl-brk]

@Dharmik8478 you might be right. I has the similar issue having component withing component. Had to tweak menu's style specifically within this one nested component.

[Dharmik8478]

@ctrl-brk plz share that tweak for the style so, I can get some idea for my problem.

[Dharmik8478]

@cagataycivici here is the plunkr with this issue,
http://plnkr.co/edit/46VP29?p=preview

[hamedkh29]

Just add appendTo="body". For example:

[Dharmik8478]

Working Great... Thanks @hamedkh29

[tiger5226]

The reason why this is happening is because here the top and left is using the event's pageX and pageY. This is positioning it relative to the whole page. This happens because the container's class is .ui-menu.ui-menu-dynamic and if you look here you will see this is absolutely positioned. This means that when you set the top and left that it will absolutely position the context menu container relative to its nearest positioned ancestor. Now it is not a standard reproduction because in all basic examples using primeng you would have to change the positioning of an ancestor to reproduce this.

What are the symptoms of this?

You will notice that the context menu is not where you clicked. This because it's being offset to the ancestor rather than the page as expected. Depending on your layout, you may not even see the context menu because it is off the page entirely.

This is also why appending it to body works because it positions it to the page. I am not sure it is a bug, however this will also happen with the p-tooltip.

An alternative would be to make the {position : 'fixed'} with inline styling. That is also a good test to see if this is the actual problem.

[rashnk]

Thanks @hamedkh29 , it worked,

[chriskali]

@hamedkh29, Cheers! Thats the solution. I had an issue implementing p-contextMenu in p-tree Element. Thanks.

[eredwan]

@hamedkh29 appendTo="body" is not working for me. The delete button positioning seems good now but now it is behind the my modal as @tiger5226 had mentioned. (I am using the primeng table in a modal pop up). Anyone have any other tricks to get around this? Thank You

[josineiaraujo]

@hamedkh29 this worked for min, thanks!!!!