I am currently in the process of setting up a vertical stepper that includes a NgbDatepicker. However, I have encountered an issue where the datepicker appears to be partially hidden by the next step, as illustrated below.
https://i.sstatic.net/h9nDK.png
Here is the code snippet:
<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>
I've tried adjusting padding and margin on the datepicker, but it doesn't seem to have any effect. Any suggestions?