Popover overflowing past screen when trigger is on the edge of the screen

[dez1729]

Please provide the environment you discovered this bug in.

0.0.1-alpha.344

Which area/package is the issue in?

popover

Description

When the button is on the edge of the screen, using popover could push the popover past the screen. The underlying CDK may be limiting the width of the actual container to the edge of the screen but the underlying content will still be push past it.

In the example image the underlying container has width of 400px but the underlying "cdk overlay pane" is limited to 288px thus the overflowing container.

It may be the case that the overlay should remove the width limit and/or allow some x-offset.

Please provide the exception or error you saw

No response

Other information

No response

I would be willing to submit a PR to fix this issue

• [ ] Yes
• [X] No

[goetzrobin]

Can you create a stack blitz with this behavior displayed? I'll take a look then

[goetzrobin]

@dez1729 please provide a minimal reproduction for this and I'll take a look

[dez1729]

I cannot reproduce it on stackblitz as it seems different than my environment. However the example I did try to reproduce there gave me a different issue. Seems the popover would show up outside of the adjacent container rather than over it.

https://stackblitz.com/edit/stackblitz-starters-de98ed?file=src%2Fmain.ts

[goetzrobin]

@dez1729 the reason for this issue is that you're missing the following from the css file: @import '@angular/cdk/overlay-prebuilt.css';