Set primeNG p-dropdown width to min-content

Question

I have a p-dropdown and its width doesn't seem to change. However, I want its width to be the width of the min-content. I couldn't find any documentation regarding this on PrimNG . So, Is there any way to set its width? Thank you!

<p-dropdown attr.data-property-name="{{ serverControl.name }}" autoWidth="false"
          [name]="serverControl.name ? serverControl.name : 'testDropdown'" [options]="options"
          [disabled]="serverControl.readOnly" [ngStyle]="{width: 'min-content'}" [required]="serverControl.required"
          [title]="serverControl.title ? serverControl.title : ''"
          [ngModel]="default" (onChange)="
            serverControl.value = $event;
            select.emit($event.value ? $event.value.toString() : null)
          " #ddList="ngModel">
</p-dropdown>

Scss

body .ui-dropdown {
  border: 0.5px solid white !important;
  max-width: 7vw !important;
  min-width: 7vw !important;
  // background: $holiday-calender-header-bg !important;
}

Answer 1

You can use styleClass property binding to customize the style of the p-dropdown in primeng

<p-dropdown attr.data-property-name="{{ serverControl.name }}" autoWidth="false"
          [name]="serverControl.name ? serverControl.name : 'testDropdown'" [options]="options"
          [disabled]="serverControl.readOnly" [ngStyle]="{width: 'min-content'}" [required]="serverControl.required"
          [title]="serverControl.title ? serverControl.title : ''"
          [ngModel]="default" (onChange)="
            serverControl.value = $event;
            select.emit($event.value ? $event.value.toString() : null)
          " #ddList="ngModel" styleClass="my-dropdown">
</p-dropdown>

My custom css

.my-dropdown {
  width: 7rem;
}

Answer 2

You can add [style]="{ width: '100%', overflow: 'visible' }"

<p-dropdown attr.data-property-name="{{ serverControl.name }}"
      [style]="{ width: '100%', overflow: 'visible' }"
      [name]="serverControl.name ? serverControl.name : 'testDropdown'" [options]="options"
      [disabled]="serverControl.readOnly" [ngStyle]="{width: 'min-content'}" [required]="serverControl.required"
      [title]="serverControl.title ? serverControl.title : ''"
      [ngModel]="default" (onChange)="
        serverControl.value = $event;
        select.emit($event.value ? $event.value.toString() : null)
      " #ddList="ngModel">

Answer 3

I had faced the same issue, then I overwrote custom style. I added below code, which is working fine for me.

.p-multiselect .p-multiselect-label.p-placeholder {
  color: #6c757d;
  white-space: break-spaces;
}
.p-multiselect.p-multiselect-chip .p-multiselect-token{
  margin: 2px;
}