primeNG p-dropdown stretch 100%

Question

How to set the primeNG dropdown width to stretch 100% inside its container?

It seems to have fixed element.style and the .ui-dropdown{ width: 100% } override does not work.

Answer 1

In my case I used autoWidth = false and set style attrribute like below

<p-dropdown [options]="educationLevels" [(ngModel)]="selectedEducationLevel" 
name="educationlevel" autoWidth="false" [style]="{'width':'100%'}"></p-dropdown>

Answer 2

I found to use the Responsive approach and apply .ui-fluid style with Grid CSS at container while p-dropdown should have the [autoWidth]="false" attribute.

Example:

<div class="ui-grid ui-grid-responsive ui-fluid">
    <div class="ui-grid-row">
        <div class="ui-grid-col-12">
            <p-dropdown [autoWidth]="false"></p-dropdown>
        </div>
    </div>
</div>