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 a correct coordinate. The coordinate seems 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 seems to be off. Let me know if you need more context. Thank you
You need to sign in to view this answers
Leave feedback about this