bug(cdk/overlay): Overlay out of viewport bounds #25059
Labels
area: cdk/overlay
P3
An issue that is relevant to core functions, but does not impede progress. Important, but not urgent
Is this a regression?
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
andmax-height
CSS attributes provided by the.cdk-overlay-pane
components/src/cdk/overlay/_index.scss
Lines 62 to 63 in 2f9a59a
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
The text was updated successfully, but these errors were encountered: