想要增加 ngSelect 选项的高度答案

【问题标题】：Want to increase height of ngSelect options想要增加 ngSelect 选项的高度
【发布时间】：2021-02-08 10:42:18
【问题描述】：

表格图片：

目前ng-select 仅显示 5 个项目。我想增加下拉菜单的高度，以便它可以显示 8-10 个项目。我正在使用以下代码：

<form [formGroup]="addReportForm" class="form-horizontal col-xs-12" method="post" novalidate="novalidate" style="width: 100%;">
  <div class="form-group">
    <label for="adb-name">Name</label>
    <input  id="adb-name" class="form-control text-16-normal" type="text" placeholder="Name" formControlName="name">
  </div>
  <div class="form-group">
    <label for="adb-report">Type</label>
    <ng-select
      id="adb-report"
      [items]="allReports"
      [multiple]="false"
      [closeOnSelect]="true"
      [searchable]="true"
      bindLabel="name"
      bindValue="id"
      formControlName="vizType"
      placeholder="Select Report"
      (change)="onChange($event)"
      [(ngModel)]="reportName"
    >
    </ng-select>
  </div>
  <app-alert></app-alert>
</form>

【问题讨论】：

标签： css angular drop-down-menu dropdown

【解决方案1】：

你必须使用/deep/更多你想要改变的组件。

/deep/ .ng-dropdown-panel .ng-dropdown-panel-items {
max-height: 500px;   }

【讨论】：

【解决方案2】：

您可以使用css 增加高度：

.ng-dropdown-panel .ng-dropdown-panel-items {
    max-height: 500px !important;
}

ng-select 的默认 max-height 是 240px

【讨论】：

你是在styles.scss文件还是组件样式文件中添加了这个？
styles.scss 文件
尝试在样式中添加!important。
是的，它正在工作，谢谢！！但我怎样才能只为特定组件制作它
` ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items { .ng-dropdown-panel .ng-dropdown-panel-items { max-height: 420px ！重要的; } }` 还在全局更新css