带有 ng-select 的下拉面板中的透明背景错误答案

【问题标题】：Transparent background bug in dropdown panel with ng-select带有 ng-select 的下拉面板中的透明背景错误
【发布时间】：2021-03-03 23:58:15
【问题描述】：

我有一个奇怪的错误，仅当下拉面板超出浏览器窗口时才会出现。然后面板的背景变得透明。如果调整浏览器窗口的大小以使下拉面板在单击时完全可见，则背景不再透明。

这些是影响 ng-select 下拉菜单的自定义样式：

    .prop-form {
      ...

      &__row {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
      }

      &__col {
        flex: 1;
      }

      &__dropdown {
        display: flex;
        align-items: baseline;
      }

      &__ng-select {
        width: 100%;
        margin: 0.75em 0.5em;
      }

      &__ng-select > .ng-value-container {
        padding-bottom: 0;
      }
    }

还有标记：

    <div class="prop-form__row">
      ...
      <div class="prop-form__col">
        <div class="prop-form__dropdown">
          <ng-select class="prop-form__ng-select" name="time"
            [items]="scheduleFormService.timeOptions" [markFirst]="true" [clearable]="false" [searchable]="false"
            placeholder="Select time" formControlName="time">
            <ng-template ng-option-tmp let-item="item">
              <div>{{ item }}</div>
            </ng-template>
          </ng-select>
        </div>
      </div>
      ...
    </div>

已经尝试过的解决方案（但没有奏效）：

在组件和父组件中使用ViewEncapsulation.None
在组件样式和全局样式中使用 ::ng-deep 覆盖默认样式

Bug 出现在 Chrome 和 Safari 中。

【问题讨论】：

标签： html css angular angular-ngselect

【解决方案1】：

我的同事能够找到问题所在。下拉容器的高度设置为自动。所以当 modal 的高度不足以显示所有项目时，高度会调整为较小的值。

解决方案：

.ng-dropdown-panel {
  white-space: normal;
  height: fit-content;
}

【讨论】：