Angular NgbDatepicker 部分隐藏答案

【问题标题】：Angular NgbDatepicker partially hiddenAngular NgbDatepicker 部分隐藏
【发布时间】：2021-05-19 20:06:59
【问题描述】：

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

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

【问题讨论】：

标签： css angular datepicker ng-bootstrap

【解决方案1】：

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

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

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

【讨论】：