Прозрачный фоновый баг в выпадающей панели с помощью ng-select - PullRequest
Новая
       19

Прозрачный фоновый баг в выпадающей панели с помощью ng-select

0 голосов
/ 14 апреля 2020

У меня странная ошибка, которая возникает, только когда выпадающая панель выходит за пределы окна браузера. Фон панели становится прозрачным. Если размер окна браузера изменен так, что раскрывающаяся панель может быть полностью видна при нажатии, фон больше не будет прозрачным.

enter image description here

Это пользовательские стили, влияющие на раскрывающиеся списки 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.

1 Ответ

0 голосов
/ 17 апреля 2020

Мой коллега смог найти проблему. Высота выпадающего контейнера была установлена ​​на auto. Поэтому, когда высоты модальной модели недостаточно для отображения всех элементов, высота настраивается на меньшее значение.

Решение: 

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