DropDown перекрывает поле

Question

У меня проблема с DropDown в Angular & Primeng. DropDown с «style = width: 100%» перекрывает границу выделенным крупным текстом. Размер ширины элемента управления не должен зависеть от длины текста.

Пример можно найти по адресу https://stackblitz.com/edit/github-vur22c-cwrvzc

Есть кто-нибудь обходной путь?

Answer 1

Размер ширины элемента управления не должен зависеть от длины текста.

Это должно сработать. Установите первый div (сам выпадающий список):

p-dropdown > div 

или

 p-dropdown .ui-dropdown 

его тот же селектор, который вам решать, какой использовать:))

this css properties:

position: relative;
width: 100%;

p-dropdown больше похож на директиву / компонент, и все внутри него - это элементы, которые вы ищете.

Answer 2

Компонент p-dropdown имеет свойство style, которое используется для установки ширины p-dropdown.

Попробуйте:

<h3>Test</h3>
<div style="width: 250px; height: 100px; padding: 20px; background-color: red">
  <p-dropdown [style]="{'width':'100%'}" [options]="options1" [(ngModel)]="selected1"></p-dropdown>
</div>

Пример