How to fit p-dropdown inside of a table cell?

Question

I'm adding p-dropdown to a p-table similar to what is seen here: https://www.primefaces.org/primeng/#/table/filter

The p-dropdown is overflowing into the next cell. How can I prevent p-dropdown from flow to the next cell?

I have tried the following:
- adding [style]="{'width':'100%'}" to p-dropdown element
- adding [autoWidth]="true" to the p-dropdown element
- adding max-width to the p-dropdown element

<p-table [columns]="cols" [value]="wfdata" [paginator]="true" [rows]="10">

...

<th *ngFor="let col of cols" [ngSwitch]="col.value">
          <p-dropdown *ngSwitchCase="'invoice_status'" 
                    [options]="statuses" 
                    [autoWidth]="true"
                    [style]="{'width':'100%'}"></p-dropdown>

...

</p-table>

Answer 1

inside the p-dropdown component there is a class .ui-dropdown this set the min-width to fixed values 12.5em; so if you set the min-width to 0 or initial will solve the problem

style.scss

.base-table { 
  p-dropdown {
    .ui-dropdown {
      min-width:0;
    }
  }
}

or like this will reset the min-width for p-dropdown component in the all project

 p-dropdown {
    .ui-dropdown {
      min-width:0; // auto , initial 😀
    }
  }

demo 🔥🔥

Answer 2

You can add min-width:100% to p-dropdown element :

<p-dropdown [style]="{'width':'100%','min-width':'100%'}" *ngSwitchCase="'invoice_status'" [options]="statuses" [autoWidth]="true"></p-dropdown>