Как указать раскрывающийся список, чтобы всегда расширяться наверх

Question

У меня есть p-раскрывающийся список в нижнем колонтитуле p-таблицы. Это PrimeNg Компоненты. Я заметил, что выпадающий список иногда открывается наверх, что мне нравится в данном конкретном случае, и я хотел бы заставить его всегда открываться наверх.

В Документе p-dropdown я не нашел ничего полезного. У меня там может быть CSS-опция, которая мне здесь поможет? Пожалуйста, совет.

<p-dropdown [options]="myTypeOptions" [formControlName]="type" appendTo="body" [showClear]="true"></p-dropdown>

Answer 1

Я вижу, что когда пользователь нажимает на поле со списком, компонент p-dropdown создает div с классом ui-dropdown-panel (среди прочих), чтобы показать прокручиваемый список опций.В зависимости от положения компонента он будет отображаться либо под ним, либо над ним (по умолчанию он находится ниже), чтобы избежать переполнения.По умолчанию, когда раскрывающийся элемент div отображается поверх комбо, его позиция задается неявно с помощью следующих стилей CSS:

top: -202px;
left: 0px;

Так что, возможно, вы можете заставить свойство top всегда быть -202px снемного CSS:

1 Примените специальный класс к компоненту, чтобы отобразить над ним список:

<p-dropdown styleClass="showAbove" [options]="myTypeOptions" [formControlName]="type" appendTo="body" [showClear]="true"></p-dropdown>

2 В файле CSS компонента установите положение по умолчанию для раскрывающегося списка div:

.ui-dropdown.showAbove .ui-dropdown-panel {
  top: -202px !important;
}

РЕДАКТИРОВАТЬ: Это не работает, компонент вычитает 202px до -202px, который мы установили в приведенном выше CSS, поэтому он отображает панель выше 404px.Другим подходом может быть обработка события onClick и использование Angular Renderer2 для изменения значения div top.Я проведу несколько тестов, когда у меня будет минута, и выложу обновление.

ПРЕДЛАГАЕМОЕ РЕШЕНИЕ: Извините за задержку, у меня не так много свободного времени в последнее время ..Чтобы показать вам рабочее решение, я сделал небольшое приложение Stackblitz, чтобы вы могли поиграть с ним:

https://stackblitz.com/edit/github-2nwkvt

Не стесняйтесь задавать любые проблемы или сомнения, которые у вас есть.

Ура!

Answer 2

Попробуйте добавить этот CSS в р-ниспадающий список:

bottom: 100%;