Mat-Menu alignment problem with horizontal scrolling #16009
Assignees
Labels
P2
The issue is important to a large percentage of users, with a workaround
Comments
andrewseguin
added
the
P2
|
Have same issue with @angular/material 7.3.7 and Angular 7.1.1 |
crisbeto
added a commit
to crisbeto/material2
that referenced
this issue
Jun 8, 2019
…horizontally and overlay is anchored to the right Fixes the flexible connected position strategy calculating where to position the panel incorrectly if it's anchored so that its content flows to the left and the page is scrolled horizontally. Furthermore, the calculations for the bounding box width weren't correct for this case either. Fixes angular#16009.
crisbeto
added a commit
to crisbeto/material2
that referenced
this issue
Jun 8, 2019
…horizontally and overlay is anchored to the right Fixes the flexible connected position strategy calculating where to position the panel incorrectly if it's anchored so that its content flows to the left and the page is scrolled horizontally. Furthermore, the calculations for the bounding box width weren't correct for this case either. Fixes angular#16009.
mmalerba
pushed a commit
that referenced
this issue
Jun 10, 2019
…horizontally and overlay is anchored to the right (#16235) Fixes the flexible connected position strategy calculating where to position the panel incorrectly if it's anchored so that its content flows to the left and the page is scrolled horizontally. Furthermore, the calculations for the bounding box width weren't correct for this case either. Fixes #16009.
|
@crisbeto Any chances this is backported into v7? Thats a pretty annoying issue. |
RudolfFrederiksen
pushed a commit
to RudolfFrederiksen/material2
that referenced
this issue
Jun 21, 2019
…horizontally and overlay is anchored to the right (angular#16235) Fixes the flexible connected position strategy calculating where to position the panel incorrectly if it's anchored so that its content flows to the left and the page is scrolled horizontally. Furthermore, the calculations for the bounding box width weren't correct for this case either. Fixes angular#16009.
|
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
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.
The text was updated successfully, but these errors were encountered: