Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

ConnectedPositionStrategy doesn't work properly if the overlay's content is dynamic #4155

Closed
mjamin opened this issue Apr 19, 2017 · 1 comment · Fixed by #4250
Closed

ConnectedPositionStrategy doesn't work properly if the overlay's content is dynamic #4155

mjamin opened this issue Apr 19, 2017 · 1 comment · Fixed by #4250
Assignees
@crisbeto
Labels
P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent

Comments

@mjamin
Copy link

mjamin commented Apr 19, 2017

Bug, feature request, or proposal:

Bug

What is the expected behavior?

Position the overlay correctly within the viewport if possible.

What is the current behavior?

Overlay is positioned exceeding the viewport if the overlay's contents are dynamic and there's no fixed width set.

What are the steps to reproduce?

https://plnkr.co/edit/9hUThjYmfC7ofpSBDdKU

If the overlay's content is dynamic, the actual dimensions of the overlay content are set after the positioning logic runs.

Workaround:

setTimeout(() => overlayRef.updatePosition()); // queue update when overlay is shown

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

Angular: 4.0.2
Material: 2.0.0-beta.3
@kara kara added the P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent label Apr 20, 2017
@crisbeto crisbeto mentioned this issue Apr 22, 2017
Merged
crisbeto added a commit to crisbeto/material2 that referenced this issue Apr 24, 2017
@crisbeto
fix(connected-overlay): better handling of dynamic content
fa260ca 
* Refactors the `ConnectedPositionStrategy` to be able to use `right` and `bottom` to position the panel. This will allow the element to keep its position automatically, even if the element's size changes.
* Removes the uses of the `FakeViewportRuler` in some of the unit tests since it doesn't work very well when the element is positioned relatively to the right edge of the screen.
* Rounds down the values when testing positioning. This is necessary, because some browsers (particularly Chrome on Windows) can have some subpixel deviations.

Fixes angular#4155.
@crisbeto crisbeto mentioned this issue Apr 24, 2017
Merged
crisbeto added a commit to crisbeto/material2 that referenced this issue Apr 29, 2017
@crisbeto
fix(connected-overlay): better handling of dynamic content
b0b35a8 
* Refactors the `ConnectedPositionStrategy` to be able to use `right` and `bottom` to position the panel. This will allow the element to keep its position automatically, even if the element's size changes.
* Removes the uses of the `FakeViewportRuler` in some of the unit tests since it doesn't work very well when the element is positioned relatively to the right edge of the screen.
* Rounds down the values when testing positioning. This is necessary, because some browsers (particularly Chrome on Windows) can have some subpixel deviations.

Fixes angular#4155.
crisbeto added a commit to crisbeto/material2 that referenced this issue Apr 29, 2017
@crisbeto
fix(connected-overlay): better handling of dynamic content
5df5791 
* Refactors the `ConnectedPositionStrategy` to be able to use `right` and `bottom` to position the panel. This will allow the element to keep its position automatically, even if the element's size changes.
* Removes the uses of the `FakeViewportRuler` in some of the unit tests since it doesn't work very well when the element is positioned relatively to the right edge of the screen.
* Rounds down the values when testing positioning. This is necessary, because some browsers (particularly Chrome on Windows) can have some subpixel deviations.

Fixes angular#4155.
crisbeto added a commit to crisbeto/material2 that referenced this issue Apr 29, 2017
@crisbeto
fix(connected-overlay): better handling of dynamic content
46c55d7 
* Refactors the `ConnectedPositionStrategy` to be able to use `right` and `bottom` to position the panel. This will allow the element to keep its position automatically, even if the element's size changes.
* Removes the uses of the `FakeViewportRuler` in some of the unit tests since it doesn't work very well when the element is positioned relatively to the right edge of the screen.
* Rounds down the values when testing positioning. This is necessary, because some browsers (particularly Chrome on Windows) can have some subpixel deviations.

Fixes angular#4155.
crisbeto added a commit to crisbeto/material2 that referenced this issue Apr 29, 2017
@crisbeto
fix(connected-overlay): better handling of dynamic content
6e48dae 
* Refactors the `ConnectedPositionStrategy` to be able to use `right` and `bottom` to position the panel. This will allow the element to keep its position automatically, even if the element's size changes.
* Removes the uses of the `FakeViewportRuler` in some of the unit tests since it doesn't work very well when the element is positioned relatively to the right edge of the screen.
* Rounds down the values when testing positioning. This is necessary, because some browsers (particularly Chrome on Windows) can have some subpixel deviations.

Fixes angular#4155.
crisbeto added a commit to crisbeto/material2 that referenced this issue Apr 29, 2017
@crisbeto
fix(connected-overlay): better handling of dynamic content
44eea9b 
* Refactors the `ConnectedPositionStrategy` to be able to use `right` and `bottom` to position the panel. This will allow the element to keep its position automatically, even if the element's size changes.
* Removes the uses of the `FakeViewportRuler` in some of the unit tests since it doesn't work very well when the element is positioned relatively to the right edge of the screen.
* Rounds down the values when testing positioning. This is necessary, because some browsers (particularly Chrome on Windows) can have some subpixel deviations.

Fixes angular#4155.
crisbeto added a commit to crisbeto/material2 that referenced this issue Apr 29, 2017
@crisbeto
fix(connected-overlay): better handling of dynamic content
098f44d 
* Refactors the `ConnectedPositionStrategy` to be able to use `right` and `bottom` to position the panel. This will allow the element to keep its position automatically, even if the element's size changes.
* Removes the uses of the `FakeViewportRuler` in some of the unit tests since it doesn't work very well when the element is positioned relatively to the right edge of the screen.
* Rounds down the values when testing positioning. This is necessary, because some browsers (particularly Chrome on Windows) can have some subpixel deviations.

Fixes angular#4155.
@crisbeto crisbeto added the has pr label May 1, 2017
crisbeto added a commit to crisbeto/material2 that referenced this issue May 3, 2017
@crisbeto
fix(connected-overlay): better handling of dynamic content
057603e 
* Refactors the `ConnectedPositionStrategy` to be able to use `right` and `bottom` to position the panel. This will allow the element to keep its position automatically, even if the element's size changes.
* Removes the uses of the `FakeViewportRuler` in some of the unit tests since it doesn't work very well when the element is positioned relatively to the right edge of the screen.
* Rounds down the values when testing positioning. This is necessary, because some browsers (particularly Chrome on Windows) can have some subpixel deviations.

Fixes angular#4155.
andrewseguin pushed a commit that referenced this issue May 4, 2017
@crisbeto @andrewseguin
fix(connected-overlay): better handling of dynamic content (#4250)
525ce1e 
* fix(connected-overlay): better handling of dynamic content

* Refactors the `ConnectedPositionStrategy` to be able to use `right` and `bottom` to position the panel. This will allow the element to keep its position automatically, even if the element's size changes.
* Removes the uses of the `FakeViewportRuler` in some of the unit tests since it doesn't work very well when the element is positioned relatively to the right edge of the screen.
* Rounds down the values when testing positioning. This is necessary, because some browsers (particularly Chrome on Windows) can have some subpixel deviations.

Fixes #4155.

* refactor: move new logic into _setElementPosition method
@angular-automatic-lock-bot
Copy link

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.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 5, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@crisbeto crisbeto

Labels
P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(connected-overlay): better handling of dynamic content crisbeto/material2
3 participants
@mjamin @kara @crisbeto