angular
bug(cdk/overlay): Overlay out of viewport bounds
Is this a regression?
- [ ] Yes, this behavior used to work in the previous version
The previous version in which this bug was not present was
No response
Description
When using a position strategy connected a wide element and attempting to position an overlay using a position of a different element, the overlay will not be positioned correctly.
For example, I have a button in a container. The container spans the full width of the view and the button it positioned to the top right of the container. I would like to position the overlay so that it is under the button but connected to the container. When I click the button, I expect the overlay to be positioned correctly within the view.
From my initial investigation, the issue seems to be related to the max-width and max-height CSS attributes provided by the .cdk-overlay-pane https://github.com/angular/components/blob/2f9a59a24c0464cbed7f54cbeb5cba73e6007715/src/cdk/overlay/_index.scss#L62-L63
In my stackblitz sample, I copied over these attributes into the styles.css file (line 56-57). If those lines are commented out/removed, the overlay will work as intended. It appears that when attempting to calculate whether or not the overlay will be within the view, the min-width and min-height will affect the calculation. Also good to note that if the overlay is connected to the button instead of the container, the overlay will also work as inteded. However, for my specific use case, that is not possible due to other technical limitations.
Reproduction
https://stackblitz.com/edit/angular-ivy-knuuwz?file=src/app/app.component.ts
Expected Behavior
The expected behavior is that, regardless of which element the overlay is connected it, it will be positioned correctly within the view.
Actual Behavior
When attempting to position the overlay, the overlay will be pushed outside of the view
Environment
- Angular: 12.2.11
- CDK/Material: 12.2.11
- Browser(s): Chrome/Edge
- Operating System (e.g. Windows, macOS, Ubuntu): Windows
I came in here to report a similar issue with CDK 15.0.3 not providing the styling for "cdk-overlay-container" and related css classes. When I see how many bugs you have open... I am like "what a mess" - definitly not the right component lib to work with.
Good luck!
I would like to know if there was an update as well for this issue. The current overlay I'm using has the same error, with the height of the component being out of bounds.
I would like to know if there was an update as well for this issue. The current overlay I'm using has the same error, with the width of the component being out of bounds.
