Components: Overlay supports repositioning upon resize / scroll

[jelbourn]

As of now, overlays only position themselves once (and when told to reposition through the OverlayRef).

This issue tracks overlays being able to automatically reposition themselves when scrolling or resize.

[fxck]

Any ETA on this?

[fxck]

@jelbourn almost all components that use overlay look broken because this doesn't work.. it seems like a pretty high priority thing to me. Do you want to work on this internally, or I can try and make a PR?

[jelbourn]

@fxck This is something we plan to work on- I have a specific approach in mind.

[fxck]

and do you have it written down somewhere? @jelbourn

[fxck]

@jelbourn this is such a pain in the ass.. can you please share what you have in mind so I can give it a shot?

Is it what's in https://docs.google.com/document/d/1jSMjkKSdzbQa2cuCeSFpzFAwDHr7xY4eqsXkfF6MeqA/preview or something else entirely?

Even this

If you want to position an overlay relative to some static element whose only scrolling container is the document body, everything works great after scroll (example).

is not true anymore though, as md-overlay-container has position: fixed now

[jelbourn]

It's mostly what's in the doc.

@crisbeto has been exploring the "disable scrolling" option in #1971 and @andrewseguin is already working on the repositioning.

[mycarrysun]

Stumbled upon this issue because I am trying to figure out why the MdDialog is position:static (changing to absolute fixes it...kind of). The overlay is on top of the dialog and the dialog is full width of the page (no width is declared in my config). Is this broken or do I need to do something to get it to work? I can fix it by adding display:flex and height: 100% to the .md-global-overlay-wrapper, but not sure if that is the correct way to go about it.

[crisbeto]

Try clearing your node_modules @mycarrysun. There have been a few similar issues after the latest release.

[mycarrysun]

Hmm strange, it worked though! Thanks @crisbeto

[k3nsei]

@jelbourn If menu is open indeed scroll is disabled. But only if you using mouse roller. But there are other options to scroll. For example by pressing up, down, pageUp, pageDown, home and end keys.

[jelbourn]

2703 adds this for tooltip. Once that is in, subsequent PRs can add this to menu and select.

[aldo-roman]

Hi @jelbourn, any update on this issue? It's been 2 months now. Thanks!

[jelbourn]

This issue is now replaced by #4093

[marcusreese]

@jelbourn You mentioned this issue is replaced by 4093, which is "Overlay-based components should handle page scroll gracefully." I'm sure you're right, but I'm not understanding what to do to handle resize events (since this closed issue is called "Overlay supports repositioning upon resize / scroll"). Would you clarify for those like myself who were searching the internet for how to handle problems in angular cdk overlay when the user resizes the window? For example, I see a CloseScrollStrategy that will close the overlay as soon as the user starts scrolling. Is there such a thing for resize, like a CloseResizeStrategy? Or some other way to approach that problem?

[jelbourn]

There isn't anything that does resize automatically; we don't consider it to be as core of a use-case. The Material Design team did some user studies at some point and found that the only people who really resize their browser windows are web developers.

[marcusreese]

Okay, well I'll probably use @HostListener('window:resize') or fromEvent and in the callback do overlay.dispose();

[AFDevMike]

For those looking for window:resize/ post attach change possition solution; there is now OverlayRef.updatePositionStrategy() which can be called before OverlayRef.updatePosition()

[angular-automatic-lock-bot[bot]]

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._}