Bootstrap angular datepicker ngbDatepicker не переполняется на ngbPanelContent

Я использую ngbDatepicker в форме, как показано ниже.

<ngb-panel>
              <ng-template ngbPanelTitle>
                <div class = "row">
                  <ui-switch (change) = "onChange($event,2)" [checked] = "professionalLearningEvent.sportsPractive" size = "small"></ui-switch>&nbsp;&nbsp;
                  <label class = "accordianTitle" (click) = "onAccordianTitleClick(2)">Will your sports practice be
                    affected ?</label>
                </div>
              </ng-template>
              <ng-template ngbPanelContent>
                <div class = "container">

<div class = "input-group">
  <input class = "form-control" [formControl] = "control" ngbDatepicker [dayTemplate] = "getDayTemplate()" #d = "ngbDatepicker" [ngClass] = "{ 'is-invalid': isFieldInvalid(control) }">
  <div class = "input-group-append">
    <button class = "btn btn-sm btn-outline-secondary" (click) = "d.toggle()" type = "button">
      <span class = "fa fa-calendar"></span>
    </button>
  </div>
</div>

                </div>
              </ng-template>
            </ngb-panel>

Пользовательский интерфейс средства выбора даты не переполняется. Попробуйте найти какое-то решение, но не в состоянии.