Angular NgbDatepicker 部分隐藏

Question

我正在尝试创建一个包含 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>

在此日期选择器上应用的填充和边距似乎没有效果。有什么建议吗？

Answer 1

mat-vertical-stepper 创建一个 div 溢出设置为隐藏。它的cssclass是mat-vertical-stepper-content，然后为了解决我将封装属性设置为ViewEncapsulation.None并覆盖了这个cssclass

.mat-vertical-stepper-content {
    overflow: visible !important;
}

现在我可以看到我的日期选择器了

Angular NgbDatepicker 部分隐藏

Angular NgbDatepicker partially hidden

css

angular

datepicker

ng-bootstrap