Context Menu positioning within scrollable element (angular)

I'm using cdk-virtual-scroll-viewport to display a large list of elements like below

<cdk-virtual-scroll-viewport itemSize="115px" class="scrollable-card">
<div *cdkVirtualFor="let project projects">
<app-project-card [project]="project"></app-project-card>
</div>
</cdk-virtual-scroll-viewport>


I have a contextmenu defined in app-project-card component like below

<mat-card class='project-card' (contextmenu)="onRightClick($event)">
//other elements inside which are irrelavant
</mat-card>

<div style="visibility: hidden; position: fixed;" [style.left]="menuTopLeftPosition.x"
[style.top]="menuTopLeftPosition.y" [matMenuTriggerFor]="menu"></div>

<mat-menu #menu="matMenu">
<button mat-menu-item (click)="onEdit(project.id)"><mat-icon>edit</mat-icon>Edit</button>
<button mat-menu-item (click)="onDelete(project.id)"><mat-icon>delete_outline</mat-icon>Delete</button>
</mat-menu>


Below is my code for onRightClick function.

onRightClick(event: MouseEvent) {
event.preventDefault(); // Prevent the browser's default context menu
// Set the position of the context menu
this.menuTopLeftPosition.x = `${event.clientX}px`;
this.menuTopLeftPosition.y = `${event.clientY}px`;
// Open the context menu
this.matMenuTrigger.openMenu();
}



The problem I'm facing is that my context menu isn't displayed on the correct coordinates. The coordinates seem to be calculated relative to the viewport, I'm not sure.

Scrolling the viewport changes the value of how much the y cordinate is off. x cordinate stays the same but is off. Let me know if you need more context. Thank you

Continue reading...