primeNG p-dropdown stretch 100% - css

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>

Answer 3

For me,
[style]="{'minWidth':'100%'}"
does the trick!
Then I used like this:
<span style="width: 100%">
<p-dropdown [style]="{'minWidth':'100%'}" [options]="items" [(ngModel)]="selecteditem"></p-dropdown>
</span>

Answer 4

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

Answer 5

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.

Answer 6

For me:
.ui-dropdown {
max-width: 100%;
}
Did the trick, here is my html:
<p-dropdown
[options]="sitBusinessPartner"
[filter]="true"
[(ngModel)]="businessPartner"
(onChange)="changeBusinessPartner()"
[autoWidth]="false"
></p-dropdown>
Edit, I suggest to use this:
.ui-dropdown.ui-dropdown-clearable .ui-dropdown-label {
text-overflow: ellipsis;
}
.ui-dropdown .ui-dropdown-label {
text-overflow: ellipsis;
}
In order to handle a possible text overflow and display a nice ellipsis like this:
This solution was adapted from here.

Answer 7

You can try this
html:
<div class="p-col-10">
<span class="p-fluid">
<p-dropdown></p-dropdown>
</span>
</div>
css:
.p-dropdown-panel {
left: 0 !important;
max-width: 100% !important;
}
.p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item {
white-space: inherit;
}

Answer 8

Try this in css file.
:host ::ng-deep .p-dropdown {
width: 100%;
}

Answer 9

What I did and worked for me:
Using the grid system you can choose how many "columns" to display the element. For example, if you want to stretch 100% inside the container, consider that the element is occupying 12 columns, like in the code below:
<div class="p-formgrid p-grid">
<div class="p-field p-col">
<p-dropdown></p-dropdown>
</div>
</div>
But let's say you want to put another element next to it and want them to have the same width, you'd have something like that:
<div class="p-formgrid p-grid">
<div class="p-field p-col">
<p-dropdown></p-dropdown>
</div>
<div class="p-field p-col">
<element></element>
</div>
</div>
You can also have different widths for each element, based on how many columns they are occupying:
<div class="p-formgrid p-grid">
<div class="p-field p-col-7">
<p-dropdown></p-dropdown>
</div>
<div class="p-field p-col">
<element></element>
</div>
</div>
The sum of the columns has to be 12. If you said the first element is 7 columns long, the second will get 5 columns automatically. Try different values and see what works best for you.

Answer 10

The [autoWidth] attr was removed in v7 but I was able to achieve this with >7 version using styleClass="w-100":
<p-dropdown styleClass="w-100" ...>

Answer 11

"autoWidth" did not work for me, I just did this in my CSS:
p-dropdown {
min-width: 80%;
}
.ui-dropdown{
width: 100%;
}