如何自定义离子中的离子选择弹出高度

时间:2019-10-04 17:42:23

标签: javascript css angular ionic-framework ionic4

我正在尝试覆盖max-height的{​​{1}},该div使用interfaceOptions属性将弹出窗口中的元素分组,但是到目前为止我还没有走运,这就是我所拥有的到目前为止:

 customOptions: Record<string, string> = {
    header: this.translate.instant('mobile.giving.deductionStartDateHeader'),
    cssClass: 'ion-select-max-height'
  };
.ion-select-max-height {
 .alert-radio-group {
      max-height: 100%!important;
      }
}
<ion-select [interfaceOptions]="customOptions" [formControlName]="fields.deductionStartDate">
    <ion-select-option *ngFor='let date of company.possibleDeductionDates | slice:0:6' [value]="date">
                {{ date | date:'mediumDate' }}
    </ion-select-option>
</ion-select>

如何在不覆盖全局类的情况下更改具有类div的{​​{1}}的最大高度?

enter image description here

1 个答案:

答案 0 :(得分:0)

如果我在创建的类之前使用ng-deep来传递给cssClass属性,则它会覆盖我要在弹出窗口中修改的类:

::ng-deep .ion-select-max-height {
 .alert-radio-group {
      max-height: 100%;
      }
}

我仍在学习有角度的样式,但是我读了ng-deep的作用是将样式强制降低到子组件,我看到ion-alert被注入到DOM中,所以我猜是子组件