Skip to content

DatePicker with adaptivePosition true is rendering off the view port when in a narrow scroll parent #6795

@ronaldhorner

Description

@ronaldhorner

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
    });

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions