PrimeNG MultiSelect with Display: Chip overflow behaviorr

Question

My issue is very similar to the one faced here: PrimeNG Chips overflow behaviour

The only difference is that I'm using Multi-Select Dropdown with the Display: Chip as one of the settings. The problem is that the container keeps on stretching horizontally and goes off the page, when I want it to expand vertically. I thought perhaps finding the elements and using the suggested CSS from the previous answer would work, but to no avail... I've tried the following:

::ng-deep .p-multiselect-label-container, .p-multiselect-chip {
  flex-wrap: wrap;
  align-content: space-between;
  padding-bottom: 0;
}

::ng-deep .p-multiselect-token, .p-multiselect-token-label {
  margin-bottom: 0.5rem;

Thanks so much for your help.

score 7 · Accepted Answer · answered Mar 23 '21 at 21:07

You were very close. The drop down can end up having some ugly whitespace when it wraps but its better than running off the page.

::ng-deep p-multiselect .p-multiselect-label{
    display: flex;
    flex-wrap: wrap;
}

::ng-deep p-multiselect .p-multiselect-token{
    margin-bottom: .5rem
}

PrimeNG MultiSelect with Display: Chip overflow behaviorr

1 Answers1