javascript - 如何在 ionic 中自定义 ionic 选择弹出高度

标签 javascript css angular ionic-framework ionic4

我正在尝试覆盖 divmax-height,它使用 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>

如何在不覆盖全局类的情况下更改具有类 .alert-radio-groupdiv 的最大高度?

enter image description here

最佳答案

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

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

我仍在学习 Angular 样式,但我读到 ng-deep 所做的是将样式强制到子组件,我看到 ion-alert 是注入(inject)到 DOM 中,所以我猜它是一个子组件

关于javascript - 如何在 ionic 中自定义 ionic 选择弹出高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58241018/

相关文章:

javascript - 将 php 变量从 Controller 传递到 javascript 函数

php - 从浏览器启动在后台执行 php 脚本

javascript - 调试node.js时出现"breakpoint set but not yet bound"错误

html - css元素边框以一种奇怪的方式影响其他元素

javascript - Bootstrap float 面板

javascript - 如何仅在屏幕尺寸小于 5 英寸的设备上应用 CSS?

javascript - 使用 Angular 6 上传 JSON 文件

javascript - Angular Material 样式类不起作用

javascript - 在 div 中使用 ngFor 时 Angular 2 模板解析错误

angular - 链接并合并 3 个具有结果依赖性的 RxJS Observables,而无需嵌套在 TypeScript 和 Angular 4 中