Angular NgbDatepicker部分隐藏

我正在尝试创建一个包含NgbDatepicker的垂直步进器。问题在于，日期选择器在下一步中被部分隐藏，如下所示。

这是代码：

     <mat-vertical-stepper [linear]="true" #stepper>
        <mat-step [stepControl]="headerForm">
            <form [formGroup]="headerForm" class="pb-5">
                <ng-template matStepLabel>{{ labels.NEW_JOB_HEADER_STEP }}</ng-template>
                <div class="form-group">
                    <div class="input-group">
                        <input class="form-control" placeholder="{{ labels.TODO_DATE_PLACEHOLDER }}" 
                            formControlName="date" id="date" ngbDatepicker #d="ngbDatepicker"
                            autocomplete="off" data-container="body">
                        <div class="input-group-append">
                            <button class="btn btn-outline-secondary calendar" (click)="d.toggle()" type="button">
                                <fa-icon [icon]="faCalendar"></fa-icon>
                            </button>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="form-check form-check-inline" *ngFor="let pt of productTypes">
                        <input class="form-check-input" type="checkbox" value="" [attr.id]="pt" [formControlName]="pt">
                        <label class="form-check-label" [attr.for]="pt">{{ pt }}</label>
                    </div>
                </div>
                <button class="btn btn-success" matStepperNext>{{ labels.NEW_JOB_NEXT_STEP }}</button>
            </form>
        </mat-step>

在此日期选择器上应用的填充和边距似乎无效。有小费吗？