DatePicker popup attached to body is shown behind modal window

[HexagonSun]

Bug description:

Configuring a NgbDatepicker with container="body" and placing it within a NgbActiveModal dialog causes the datepicker's popup to be shown underneath the modal's backdrop.

Link to minimally-working StackBlitz that reproduces the issue:

https://stackblitz.com/edit/angular-ukonh5?file=src/app/modal-basic.html

This Stackblitz is forked from the "
Modal with default options" example here, and the only change is adding container="body" to the input.

Versions of Angular, ng-bootstrap and Bootstrap:

Angular: 13.0.3

ng-bootstrap: 12.0.0

Bootstrap: 5 (whatever ng-bootstrap 12.0.0 depends on, locally I use bootstrap 5.1.3)

[HexagonSun]

This seems to be a regression, as there was #3133 which is basically the same issue.

As far as I can see, the issue is caused by

• The modal window and backdrop having z-index: 1055
• But the datepicker's .ngb-dp-body's z-index is 1050 (Edit: it's currently 1050, not 1055 as I previously wrote).

It seems that the z-index for the modal was increased, but .ngb-dp-body not adapted.

Edit: found it: fc84cb1d.

[alvintan99]

Edit line 23 of modal-basic.html and the datepicker will be on top of the modal. @HexagonSun

<input
  id="dateOfBirth"
  class="form-control"
  placeholder="yyyy-mm-dd"
  name="dp"
  ngbDatepicker
  #dp="ngbDatepicker"
  container="modal-body"
/>

[lamson11]

muốn code giao diện giống vậy mình dùng loại date picker nào