0

I'm using PrimeNG and p-dropdown to show a bunch of filtering options. However, in trying to make things responsive, p-dropdown seems to be fixed to a min-width of content and I can't seem to override it so that it might ellipsis the content or truncate it, etc.

This is the image before making the display narrower: Normal Width

And this is what it looks like if I resize my browser...Resized Image

If you notice, the cost center drop down sized to min content, but nothing smaller.

If I replace the dropdown with an input box: Expected Behavior

I've tried a few different CSS options to no avail.

[style]="{'minWidth':'20px'}"

I have it working fine going the other way, it sizes to correctly when going wider, just not narrow.

So what did I miss?

Thanks, Nick

Nick Jacobs
  • 579
  • 2
  • 9
  • 29

1 Answers1

1

I believe for this to work, you need to set the autoWidth field to be false.

For example:

<p-dropdown
    [options]="cities"
    [(ngModel)]="selectedCity"
    optionLabel="name"
    optionValue="code"
    autoWidth="false"
    [style]="{ minWidth: '50px', width: '50%' }">
</p-dropdown>

This gives me the following:

enter image description here

Stackblitz for reference

Matt List
  • 1,825
  • 1
  • 21
  • 25
  • Interestingly enough, this doesn't seem to work if I'm using CSS grids versus something like bootstrap grids. Bootstrap fine: CSS layouts, not so much. – Nick Jacobs Aug 23 '22 at 19:25
  • Yeah I'm not so much clued up on css grid as I am working with PrimeFlex, Tailwind and bootstrap. Are you using a combination of css grids and PrimeNG? – Matt List Aug 29 '22 at 06:36
  • LOL, well, I'm going to use what ever works. I am essentially updating an older version of the same application to the newer technologies. The original was built with Angular 1.x and bootstrap. With that in mind, I was going to use newer technology to "catch" it up. – Nick Jacobs Aug 30 '22 at 18:03