0

I have a problem with DropDown in Angular & Primeng. The DropDown with "style=width:100%" overlaps the border by selected large text. The width size of then control should not depend on the text length.

An example can find at https://stackblitz.com/edit/github-vur22c-cwrvzc

Have somebody a workaround?

enter image description here

DJ Anti
  • 29
  • 7
  • Does this answer your question? [primeNG p-dropdown stretch 100%](https://stackoverflow.com/questions/41354416/primeng-p-dropdown-stretch-100) – Kiran Mistry Feb 05 '20 at 07:03

2 Answers2

0

p-dropdown component has style property use that to set p-dropdown width.

Try this:

<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>

Example

Chellappan வ
  • 23,645
  • 3
  • 29
  • 60
0

The width size of then control should not depend on the text length.

This should do the trick. Set on first div (the dropdown itself):

p-dropdown > div

or 

 p-dropdown .ui-dropdown

its the same selector, its up to you which one to use :))

this css properties:

position: relative;
width: 100%;

p-dropdown is more like a directive/component and everything inside it is the elements that you are looking for.

GKirov
  • 25
  • 4