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.

do you mean primeNG? – Abhinav Gauniyal Dec 28 '16 at 02:04 — Abhinav Gauniyal, Dec 28 '16 at 02:04

score 51 · Answer 1 · answered Apr 21 '17 at 23:05

51

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>

answered Apr 21 '17 at 23:05

Ziggler

3,361
3
43
61

3

This works for me without autoWidth="false" – UrbanoJVR Jul 16 '21 at 09:26
@UrbanoJVR .. can you please post your answer... – Ziggler Nov 09 '21 at 17:59

score 35 · Answer 2 · edited Jul 12 '17 at 11:52

35

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>

edited Jul 12 '17 at 11:52

Episodex

4,479
3
41
58

answered Dec 29 '16 at 06:29

McLac

2,713
3
15
19

2

Wow, that saved me ton of time! I already had .ui-fluid in the form and my `p-dropdown` was always 30px wide. Setting `autoWidth` to false fixed the problem. – Episodex Jul 12 '17 at 11:48
@Episodex Thank you. – sabithpocker Jul 14 '17 at 09:59

score 19 · Answer 3 · answered Sep 03 '20 at 14:02

19

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>

answered Sep 03 '20 at 14:02

edu4hd0

301
2
3

score 3 · Answer 4 · answered Aug 10 '21 at 12:30

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

score 1 · Answer 5 · answered Sep 19 '22 at 14:47

1

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

answered Sep 19 '22 at 14:47

TruncatedCoDr

350
3
6

score 0 · Answer 6 · answered Apr 21 '17 at 23:16

0

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

answered Apr 21 '17 at 23:16

Aravind

40,391
16
91
110

Note: In my case, this needed to be applied under the global "styles.scss" rather than individual component stylesheets – Connor Jul 23 '20 at 01:16
2

Use specificity, not `!important` – John White Nov 11 '20 at 05:12

Ganesh Doke · Answer 7 · 2017-12-29T06:32:45.447

0

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.

edited Dec 29 '17 at 06:32

answered Dec 29 '17 at 05:58

Ganesh Doke

9
2

Anthony Luzquiños · Answer 8 · 2021-04-29T20:19:13.857

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.

score 0 · Answer 9 · answered May 26 '22 at 18:34

0

Try this in css file.

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

answered May 26 '22 at 18:34

Maicon Stark

11

score 0 · Answer 10 · answered May 29 '22 at 18:37

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.

M Komaei · Answer 11 · 2023-02-27T05:06:47.113

0

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

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

edited Feb 27 '23 at 05:06

answered Feb 25 '23 at 12:16

M Komaei

7,006
2
28
34

While this code snippet may be the solution, including a detailed explanation really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion. – Shawn Hemelstrand Feb 26 '23 at 01:38

score -1 · Answer 12 · answered Jan 23 '20 at 23:00

-1

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

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

answered Jan 23 '20 at 23:00

Gerson Huarcaya

549
5
4

1

Using element name `p-dropdown` will not affect the dropdown. You need to study more about angular css – FindOutIslamNow Aug 17 '20 at 10:57
1

The reason it doesn't affect the width has nothing to do with angular and has everything to do with selecting the correct element. – Erik Philips Nov 09 '20 at 05:01

primeNG p-dropdown stretch 100%

12 Answers12

Linked