Skip to content

Mat-Menu alignment problem with horizontal scrolling #16009

Closed
@tmsteem82dev

Description

@tmsteem82dev

What is the expected behavior?

The mat-menu should be aligned to the trigger button. Even when the user has scrolled to the right. This appears to have worked fine in the past (2.0.0-beta.12?):
https://stackblitz.com/edit/dynamic-nested-menus-2ky78m

What is the current behavior?

The mat-menu is offset when opened after scrolling to the right.
Also, scrolling horizontally while the menu is open, the menu and the button are moved in different ways so that they're no longer aligned.

Especially noticeable when the button that triggers the menu is pushed to the right side by some form of styling or just plain text.

What are the steps to reproduce?

Resize the preview window so a horizontal scrollbar shows up:
https://stackblitz.com/edit/angular-bjqru6

Another example:
https://stackblitz.com/edit/angular-cnldxy

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Tested on Firefox and Chrome on Ubuntu 18.
I have tried it with @angular/material version 7.3.7 and 7.2.0 because in #11365 someone said a scrolling issue was fixed in 7.2.0.

Metadata

Metadata

Assignees

Labels

P2The issue is important to a large percentage of users, with a workaround

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions