Ngx-bootstrap: Modal inside Modal container position is not working for datepicker

Question

Datepicker container opening in random place when we place the Ngx-Bootstrap modal inside another modal. Note: Inner dailog has datepicker element.

For reference please check this demo

Update: Closing the previous modal will solve the issue but we need to maintain the state without closing the previous modal. And need to append the datepicker container to specific element

Answer 1

You can close modal1 before opening modal2 in your ts file. For example:

openModal2(template: TemplateRef<any>) {
    this.modalRef.hide();
    this.modalRef2 = this.modalService.show(template, {
      animated: true,
      backdrop: "static"
    });
  }

Answer 2

container only supports "body", remove [container]="'.test'" from your code. It should work.