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.

1

13 Answers

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>

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> <div> <div> <p-dropdown [autoWidth]="false"></p-dropdown> </div> </div>
</div>

2

For me,

[style]="{'minWidth':'100%'}"

does the trick!

Then I used like this:

<span> <p-dropdown [style]="{'minWidth':'100%'}" [options]="items" [(ngModel)]="selecteditem"></p-dropdown>
</span>

You can try this

html:

<div> <span> <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;
}

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" ...>

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

2

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 [options]="list"></p-dropdown>

then Dropdownlist should take size of biggest option.

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.

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> <div> <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> <div> <p-dropdown></p-dropdown> </div> <div> <element></element> </div>
</div>

You can also have different widths for each element, based on how many columns they are occupying:

<div> <div> <p-dropdown></p-dropdown> </div> <div> <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.

For me, using prime-ng dropdown with template in grid, container that hold p-dropdown was flex so this both combined worked[className]="'col-12 p-0'" and [styleClass]="'col-12 p-0'" added into p-dropdown tag

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

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

2

Try this in css file.

:host ::ng-deep .p-dropdown { width: 100%;
}

Use :host and ::ng-deep in your component css or scss file:

:host ::ng-deep.p-dropdown { width: 255px !important; height: 28px !important;
}

1

Your Answer

Sign up or log in

Sign up using Google Sign up using Facebook Sign up using Email and Password Submit

Post as a guest

Post Your Answer Discard

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.