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

Open
  • Is something wrong?
#6,795 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
3/5
Estimated time
1-2 days
Newbie friendliness
48/100
Issue type
Bug
Clarity
Mostly clear
Activity status
Stale
Tech stack
angular, typescript
Domain
frontend

Research direction

Start with src/datepicker/themes/bs/bs-daterangepicker-container.component.ts around the linked configuration at lines 117–119, then trace how the date picker config reaches the position service and how preventOverflow chooses its boundary. Use the StackBlitz reproduction to check behavior in a narrow scroll parent. Done when the picker stays within the viewport and respects its configured placement unless overflow prevention flips it.

Written by the indexing model from the issue text.

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?

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
    });
Dominant language
TypeScript
Stars
5.5k
Forks
1.7k
No merged PRs in 30d

Getting set up

This project ships no dev container, Dockerfile or contributing guide, so setting up is up to you: start from its README, and see our first-contribution guide for the general steps.

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from valor-software/ngx-bootstrap

All issues in valor-software/ngx-bootstrap

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.