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?
https://github.com/valor-software/ngx-bootstrap/blob/development/src/datepicker/themes/bs/bs-daterangepicker-container.component.ts#L117-L119
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
});
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
boundariesElementto the configuration so that it would be possible to use theviewportinstead of thescrollParent?https://github.com/valor-software/ngx-bootstrap/blob/development/src/datepicker/themes/bs/bs-daterangepicker-container.component.ts#L117-L119
Something like this perhaps?