-
Notifications
You must be signed in to change notification settings - Fork 1.7k
DatePicker with adaptivePosition true is rendering off the view port when in a narrow scroll parent #6795
Description
Bug description:
The DatePicker is setting its boundariesElement to the scroll parent. This is causing the adaptive positioning to limit where the date picker appears based on the width and size of the scroll parent.
Plunker/StackBlitz that reproduces the issue:
The placement is to the right, but it is limited to the right by the scroll parent and thus flipping to render left and rendering off the view port.
https://stackblitz.com/edit/stackblitz-starters-zcm9m6eu?file=package.json
Versions of ngx-bootstrap, Angular, and Bootstrap:
ngx-bootstrap: 20.0.2
Angular: 20.1.3
Bootstrap: 4.3.2
Build system: Angular CLI
Expected behavior
The date picker to render to the correctly specified placement unless the preventOverflow triggers and flips the location. The date picker should not be cut off or rendered off the screen.
Thoughts
Would it be possible to pass along an optional boundariesElement to the configuration so that it would be possible to use the viewport instead of the scrollParent?
Something like this perhaps?
this._positionService.setOptions({
modifiers: {
flip: {
enabled: this._config.adaptivePosition
},
preventOverflow: {
enabled: this._config.adaptivePosition,
boundariesElement: this._config.boundariesElement
}
},
allowedPositions: this._config.allowedPositions
});