Description
What are you trying to do?
Note: Entire UI block i am using inside the iframe tag.
I am implementing a Calendar view and each date is like a MS Excel Cell.
Each date cell on right click opens a mat-menu.
When we have large column the Calendar breaks into multiple sections.
Each section will have a scroll of it own. When we have a single section, mat-menu position works fine.
But when we have multiple sections, browser by default adds page scroll. When the user uses window/page scroll to see the below sections,
the position of mat menu changes as per the window/page scroll position, which shouldn't happen.
i.e. if i scroll for 50px in window/page scroll, the mat-menu position appears 50px below its intended position.
What troubleshooting steps have you tried?
The logic is added as provided in https://netbasal.com/context-menus-made-easy-with-angular-cdk-963797e679fc
In Template:
<div (contextmenu)="rightClick(usertype, rightClickMenu, userdata, $event)"> </div>
<div #usertype></div> openContextMenu(origin, menu, viewContainerRef: ViewContainerRef, data, overlayPosition?) {
let position;
if (overlayPosition) {
position = overlayPosition;
} else {
position = {
originX: 'end',
originY: 'top',
overlayX: 'start',
overlayY: 'bottom',
};
}
this.closeContextMenu(null);
const positionStrategy = this.overlay.position()
.flexibleConnectedTo(origin)
.withFlexibleDimensions(false)
.withPositions([
position
]);
this.overlayRef = this.overlay.create({
positionStrategy,
scrollStrategy: this.overlay.scrollStrategies.block()
});
this.overlayRef.attach(new TemplatePortal(menu, viewContainerRef, {
$implicit: data, close: this.closeContextMenu
}));
this.sub = fromEvent<MouseEvent>(document, 'click')
.pipe(
filter(event => {
const clickTarget = event.target as HTMLElement;
return (
clickTarget !== origin &&
(!!this.overlayRef &&
!this.overlayRef.overlayElement.contains(clickTarget))
);
}),
take(1)
)
.subscribe(() => {
this.closeContextMenu(null);
});
return this.onClosed.pipe(take(1));
}Reproduction
The issue is similar to #16009 scrolling issue).
Example of horizontal issue https://stackblitz.com/edit/angular-cnldxy.
Am facing similar issue in vertical scrolling scenario. As happening in example test menu1.
Environment
- Angular: "@angular/core": "^6.1.10",
- CDK/Material: "@angular/cdk": "^6.4.7", "@angular/material": "^6.4.7",
- Browser(s): All (Chrome, IE11, Firefox)
- Operating System (e.g. Windows, macOS, Ubuntu): Windows