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>

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

"autoWidth" did not work for me, I just did this in my CSS:

p-dropdown {
    min-width: 80%;
}
.ui-dropdown{
    width: 100%;
}