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

Question

我有一个奇怪的错误，只有当下拉面板超出浏览器时才会出现 window。然后面板的背景变为透明。如果调整浏览器 window 的大小以便在单击时可以完全显示下拉面板，背景将不再透明。

这些是影响 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 覆盖默认样式

错误出现在 Chrome 和 Safari 中。

Answer 1

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

解决方案：

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

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

Transparent background bug in dropdown panel with ng-select

html

css

angular-ngselect

angular