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.
113 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>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>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
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%;
}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;
}
