1

Using Angular 9 with latest version of PrimeNG. I have extended my primeNG drop down to the total length of its encapsulating column but instead of the "label" area taking up the majority of the dropdown field, the label and arrow button field more or less split the space...IMOF the dropdown button takes up MORE room than the label/selection area. How do I adjust this?

.html

<div class="col-lg-4">
   <div class="form-group">
      <p-dropdown
         [options]="mpp"
         formControlName="mpp"
         editable="true"
         placeholder="Select from dropdown or manually enter" 
         autoWidth="false"
         [style]="{ width:'100%',  overflow: 'visible'}">
      </p-dropdown>
   </div>
</div>

.ts

this.mpp = [
    {label: 'blahhhhhhhhhhh', value: 'blahhhhhhhhhhh'},
    {label: 'blahhhhhhhhhhh', value: 'blahhhhhhhhhhh'},
    {label: 'blahhhhhhhhhhh', value: 'blahhhhhhhhhhh'},
 ];

.less nothing

label placeholder is cut off

When typing in custom value

inspect

DV82XL
  • 5,350
  • 5
  • 30
  • 59
MVM
  • 127
  • 13

0 Answers0