ng-bootstrap
ng-bootstrap copied to clipboard
ng-bootstrap
Popover positioned partially off-screen and cropped
The top popover, when triggered near the page border, is being rendered in such way it gets cropped:
https://stackblitz.com/angular/rdokjdpkdoq
https://ng-bootstrap.github.io/#/components/popover/examples
The BS uses popper.js, rendering in 4.1.3:
ng-bootstrap: v4.0.0 Chrome, macOS
Ok, will reopen this as a feature request.
In case of the top placement above, bootstrap/popper SHIFT the popover horizontally until it fits (note the arrow is not centered), we will just crop it if ONLY top is specified → we don't support this feature.
P.S. Workaround would be using [position]="['top', 'auto']"
Pretty sure this is a bug. Secondary positioning should be applied to the arrow and not the whole popover window. At least that's how it works in popper.js
placement="top" results in top-center placement in positionElements. I believe the center placement should apply to the arrow and not the whole window. That way the popover will always be in the viewport as it's only moved above the reference object. And the arrow is centered to the reference element.
@maxokorokov Any update? This is an incredibly annoying shortcoming of using popovers in this library.
