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.
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.
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>
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>
You should be writing in a css file using the mentioned class as below,
.ui-dropdown {
width:100% !important;
}
Set it to be !important
LIVE DEMO
You should be editing a class in a primeng.min.css file as below,
.ui-dropdown .ui-dropdown-panel {
min-width: 100%;
width: max-content;
}
<p-dropdown id="id" [options]="list"></p-dropdown>
then Dropdownlist should take size of biggest option.
"autoWidth" did not work for me, I just did this in my CSS:
p-dropdown {
min-width: 80%;
}
.ui-dropdown{
width: 100%;
}