Menu positioning going wrong on scroll #11365

frmtlp · 2018-05-16T14:31:37Z

Bug, feature request, or proposal:
Bug

What is the expected behavior?
Menu should stay where initiated

What is the current behavior?
Menu moves down, away from initiated position

What are the steps to reproduce?
https://stackblitz.com/edit/angular-gxkc8e

Click the menu and scroll down with displayed menu

What is the use-case or motivation for changing an existing behavior?

Which versions of Angular, Material, OS, TypeScript, browsers are affected?
"@angular/core": "^6.0.0", "@angular/cli": "~6.0.1", "@angular/material": "^6.0.2", "@angular/cdk": "^6.0.2"

…nd position locking * Fixes the position of flexible overlays with pushing enabled being thrown off once the user starts scrolling. * Fixes flexible overlays with pushing not handling locked positioning. With these changes locked overlays will only be pushed when they're opened, whereas non-locked overlays will stay in the viewport, even when the user scrolls down. * Fixes a potential issue due to a couple of variables being initialized together where one is set to zero and the other one is undefined. Fixes angular#11365.

…nd position locking * Fixes the position of flexible overlays with pushing enabled being thrown off once the user starts scrolling. * Fixes flexible overlays with pushing not handling locked positioning. With these changes locked overlays will only be pushed when they're opened, whereas non-locked overlays will stay in the viewport, even when the user scrolls down. * Fixes a potential issue due to a couple of variables being initialized together where one is set to zero and the other one is undefined. Fixes #11365.

lacolaco · 2018-05-31T06:43:27Z

Any workaround for this?

…nd position locking * Fixes the position of flexible overlays with pushing enabled being thrown off once the user starts scrolling. * Fixes flexible overlays with pushing not handling locked positioning. With these changes locked overlays will only be pushed when they're opened, whereas non-locked overlays will stay in the viewport, even when the user scrolls down. * Fixes a potential issue due to a couple of variables being initialized together where one is set to zero and the other one is undefined. Fixes angular#11365.

…nd position locking * Fixes the position of flexible overlays with pushing enabled being thrown off once the user starts scrolling. * Fixes flexible overlays with pushing not handling locked positioning. With these changes locked overlays will only be pushed when they're opened, whereas non-locked overlays will stay in the viewport, even when the user scrolls down. * Fixes a potential issue due to a couple of variables being initialized together where one is set to zero and the other one is undefined. Fixes #11365.

…nd position locking * Fixes the position of flexible overlays with pushing enabled being thrown off once the user starts scrolling. * Fixes flexible overlays with pushing not handling locked positioning. With these changes locked overlays will only be pushed when they're opened, whereas non-locked overlays will stay in the viewport, even when the user scrolls down. * Fixes a potential issue due to a couple of variables being initialized together where one is set to zero and the other one is undefined. Fixes angular#11365.

crisbeto · 2018-06-06T20:07:57Z

Reopening since we had to revert the fix.

…nd position locking * Fixes the position of flexible overlays with pushing enabled being thrown off once the user starts scrolling. * Fixes flexible overlays with pushing not handling locked positioning. With these changes locked overlays will only be pushed when they're opened, whereas non-locked overlays will stay in the viewport, even when the user scrolls down. * Fixes a potential issue due to a couple of variables being initialized together where one is set to zero and the other one is undefined. Fixes #11365.

…nd position locking * Fixes the position of flexible overlays with pushing enabled being thrown off once the user starts scrolling. * Fixes flexible overlays with pushing not handling locked positioning. With these changes locked overlays will only be pushed when they're opened, whereas non-locked overlays will stay in the viewport, even when the user scrolls down. * Fixes a potential issue due to a couple of variables being initialized together where one is set to zero and the other one is undefined. Fixes angular#11365.

sollenne · 2018-06-26T20:38:33Z

Looks like @crisbeto has a PR open for this but it's been open for almost a month. Who's on PR duty this week? MERGE IT!

jsdream · 2018-07-31T16:13:31Z

@crisbeto This is quite a serious bug. Any possibility this can be fixed in the next release?

…nd position locking * Fixes the position of flexible overlays with pushing enabled being thrown off once the user starts scrolling. * Fixes flexible overlays with pushing not handling locked positioning. With these changes locked overlays will only be pushed when they're opened, whereas non-locked overlays will stay in the viewport, even when the user scrolls down. * Fixes a potential issue due to a couple of variables being initialized together where one is set to zero and the other one is undefined. Fixes angular#11365.

crisbeto · 2018-08-10T15:25:44Z

Reopening because we had to revert the fix again. Fix is resubmitted as #12624.

…nd position locking * Fixes the position of flexible overlays with pushing enabled being thrown off once the user starts scrolling. * Fixes flexible overlays with pushing not handling locked positioning. With these changes locked overlays will only be pushed when they're opened, whereas non-locked overlays will stay in the viewport, even when the user scrolls down. * Fixes a potential issue due to a couple of variables being initialized together where one is set to zero and the other one is undefined. Fixes angular#11365.

…nd position locking * Fixes the position of flexible overlays with pushing enabled being thrown off once the user starts scrolling. * Fixes flexible overlays with pushing not handling locked positioning. With these changes locked overlays will only be pushed when they're opened, whereas non-locked overlays will stay in the viewport, even when the user scrolls down. * Fixes a potential issue due to a couple of variables being initialized together where one is set to zero and the other one is undefined. Fixes #11365.

…nd position locking * Fixes the position of flexible overlays with pushing enabled being thrown off once the user starts scrolling. * Fixes flexible overlays with pushing not handling locked positioning. With these changes locked overlays will only be pushed when they're opened, whereas non-locked overlays will stay in the viewport, even when the user scrolls down. * Fixes a potential issue due to a couple of variables being initialized together where one is set to zero and the other one is undefined. Fixes angular#11365.

…nd position locking * Fixes the position of flexible overlays with pushing enabled being thrown off once the user starts scrolling. * Fixes flexible overlays with pushing not handling locked positioning. With these changes locked overlays will only be pushed when they're opened, whereas non-locked overlays will stay in the viewport, even when the user scrolls down. * Fixes a potential issue due to a couple of variables being initialized together where one is set to zero and the other one is undefined. Fixes #11365.

…nd position locking (#12624) * Fixes the position of flexible overlays with pushing enabled being thrown off once the user starts scrolling. * Fixes flexible overlays with pushing not handling locked positioning. With these changes locked overlays will only be pushed when they're opened, whereas non-locked overlays will stay in the viewport, even when the user scrolls down. * Fixes a potential issue due to a couple of variables being initialized together where one is set to zero and the other one is undefined. Fixes #11365.

snakone · 2018-09-01T02:09:39Z

Im using "@angular/material": "^6.4.7" issue still there on a fixed bottom nav

PD: seems like a Google Chrome issue, working well on other browsers

vapits · 2018-09-21T09:10:39Z

Same issue here but on ALL other browsers except Chrome.
If you open the menu and scroll the menu moves even outside the viewport.

vapits · 2018-09-21T09:39:20Z

The problem exists also in docs page.
But it is always replicaable if you host the menu in a fixed positioned item.

In that case the solution is to set position fixed to .mat-menu-panel and set the offset etc to your preferences. This is the way I solved it for my app.

…ng to be merge into 6.4.X. * Fixes the position of flexible overlays with pushing enabled being thrown off once the user starts scrolling. * Fixes flexible overlays with pushing not handling locked positioning. With these changes locked overlays will only be pushed when they're opened, whereas non-locked overlays will stay in the viewport, even when the user scrolls down. * Fixes a potential issue due to a couple of variables being initialized together where one is set to zero and the other one is undefined. Fixes angular#11365.

…e merge into 6.4.X. * Fixes the position of flexible overlays with pushing enabled being thrown off once the user starts scrolling. * Fixes flexible overlays with pushing not handling locked positioning. With these changes locked overlays will only be pushed when they're opened, whereas non-locked overlays will stay in the viewport, even when the user scrolls down. * Fixes a potential issue due to a couple of variables being initialized together where one is set to zero and the other one is undefined. Fixes #11365.

peterhogg · 2018-11-01T16:40:14Z

I've found closing on scroll somewhat fixes the issue:
@ViewChild(MatMenuTrigger) trigger: MatMenuTrigger;
window.addEventListener('scroll', this.scroll, true)

scroll = (): void => { this.trigger.closeMenu(); } };

rezabay · 2019-02-24T00:03:42Z

I still have this problem in 7.3.3!

jkon · 2019-03-13T16:47:01Z

I am having this issue too. the more annoying part is that the menu doesn't show in the viewport at all if the user is scrolled down at all. So, @peterhogg 's workaround won't work in that case. It's been 18 days since the last comment and we all need a fix

sebastianlaag · 2019-04-03T07:26:45Z

Same issue here. When scrolling down on a mobile device the closed mat-menu pops up. Really very annoying. We are using Angular 7.2.2.

harellevy · 2019-04-04T12:58:09Z

using angular 7.2.6, angular material and cdk 7.2.0 works finally (i had to downgrade material and cdk to 7.2.0 to avoid the bug - in my case in MatTooltip positioning on the bottom part of the mobile screen.)

AnshulMahajan10 · 2019-04-30T15:19:30Z

Upgraded to latest angular material and it worked

angular-automatic-lock-bot · 2019-09-10T19:02:34Z

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

crisbeto self-assigned this May 16, 2018

crisbeto added P2 The issue is important to a large percentage of users, with a workaround has pr labels May 16, 2018

This was referenced May 20, 2018

fix(overlay): flexible overlay with push not handling scroll offset and position locking #11421

Merged

Bug: mat-menu issues on scroll #11471

Closed

crisbeto mentioned this issue May 25, 2018

mat-tooltip won't work ideally when attaching on a fixed element #11508

Closed

crisbeto mentioned this issue May 30, 2018

Mozilla firefox and Edge mat-menu scroll strategy not working #11583

Closed

josephperrott closed this as completed in #11421 May 31, 2018

crisbeto mentioned this issue Jun 2, 2018

fix(overlay): flexible overlay with push not handling scroll offset and position locking #11628

Merged

crisbeto reopened this Jun 6, 2018

crisbeto mentioned this issue Jun 6, 2018

Open Menu positioning breaks when scrolling below top of root trigger #11679

Closed

This was referenced Jun 12, 2018

[Tooltip] Wrong tooltip position while scrolling when the element position is fixed on the right #11761

Closed

matMenu ScrollStrategy #11776

Closed

julianobrasil mentioned this issue Jun 19, 2018

fix(datepicker): change overlay position strategy so the calendar is kept on-screen #11607

Merged

This was referenced Jul 7, 2018

[Tooltip] Incorrect position on a sticky element #12090

Closed

Mat-menu, problem with scrolling #12128

Closed

crisbeto mentioned this issue Jul 15, 2018

Mat menu position from fixed trigger element #12220

Closed

josephperrott added the G This is is related to a Google internal issue label Aug 8, 2018

josephperrott closed this as completed in #11628 Aug 9, 2018

crisbeto mentioned this issue Aug 10, 2018

fix(overlay): flexible overlay with push not handling scroll offset and position locking #12624

Merged

crisbeto reopened this Aug 10, 2018

jelbourn closed this as completed in #12624 Aug 28, 2018

Stexxen mentioned this issue Sep 1, 2018

Menu position going wrong on Scroll. Reappearance of #11365 #12937

Closed

LeonardoGastonRossi mentioned this issue Sep 22, 2018

fix(overlay): flexible overlay with push not handling scroll offset and position locking (6.4.X) #13261

Closed

Gargamil mentioned this issue Jan 16, 2019

Bug: Notification geli-lms/geli#1082

Closed

tmsteem82dev mentioned this issue May 13, 2019

Mat-Menu alignment problem with horizontal scrolling #16009

Closed

angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 10, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Menu positioning going wrong on scroll #11365

Menu positioning going wrong on scroll #11365

frmtlp commented May 16, 2018 •

edited

Loading

lacolaco commented May 31, 2018

crisbeto commented Jun 6, 2018

sollenne commented Jun 26, 2018

jsdream commented Jul 31, 2018

crisbeto commented Aug 10, 2018

snakone commented Sep 1, 2018 •

edited

Loading

vapits commented Sep 21, 2018

vapits commented Sep 21, 2018

peterhogg commented Nov 1, 2018

rezabay commented Feb 24, 2019

jkon commented Mar 13, 2019

sebastianlaag commented Apr 3, 2019 •

edited

Loading

harellevy commented Apr 4, 2019

AnshulMahajan10 commented Apr 30, 2019

angular-automatic-lock-bot bot commented Sep 10, 2019

Menu positioning going wrong on scroll #11365

Menu positioning going wrong on scroll #11365

Comments

frmtlp commented May 16, 2018 • edited Loading

lacolaco commented May 31, 2018

crisbeto commented Jun 6, 2018

sollenne commented Jun 26, 2018

jsdream commented Jul 31, 2018

crisbeto commented Aug 10, 2018

snakone commented Sep 1, 2018 • edited Loading

vapits commented Sep 21, 2018

vapits commented Sep 21, 2018

peterhogg commented Nov 1, 2018

rezabay commented Feb 24, 2019

jkon commented Mar 13, 2019

sebastianlaag commented Apr 3, 2019 • edited Loading

harellevy commented Apr 4, 2019

AnshulMahajan10 commented Apr 30, 2019

angular-automatic-lock-bot bot commented Sep 10, 2019

frmtlp commented May 16, 2018 •

edited

Loading

snakone commented Sep 1, 2018 •

edited

Loading

sebastianlaag commented Apr 3, 2019 •

edited

Loading