adaptivePosition has problems with css property overflow-x and overflow-y

[tietor]

Bug description:

I have this code here:

<div class="row" style="overflow-x: auto; overflow-y: hidden">
  <div class="col-xs-12 col-12 col-md-4 form-group mb-3">
    <input type="text"
           placeholder="Datepicker"
           class="form-control"
           bsDatepicker
           [bsConfig]="{ adaptivePosition: true }">
  </div>
</div>

the datepicker won't get displayed correctly:

this happens because of the following style properties: overflow-x: auto; overflow-y: hidden

if i remove these 2 properties, the datepicker is displayed correctly:

why does these 2 css properties have negative impacts to the adaptivePosition? in my opinion the adaptivePosition should also work, when i set these 2 css properties. it shouldn't consider them. it should consider the browser window.

Versions of ngx-bootstrap, Angular, and Bootstrap:

ngx-bootstrap: 19.0.2

Angular: 19.0.6

Bootstrap: 5.3.0

Stackblitz example: https://stackblitz.com/edit/stackblitz-starters-ccjwbqfj?file=src%2Fmain.ts

[omsrivastava]

Facing the same issue on tablets and phones. When opening the calendar with adaptivePosition: true, some of its portion is getting out of the viewport.

CC: @valorkin

[tietor]

What is with this issue? I'm still waiting for a solution

[lexasq]

@tietor hey, could you provide a proper plunker or stackblitz reproduction?

[tietor]

hey @lexasq I added a stackblitz example in my description. The bug still occurs.