[FIXED] PrimeNG MultiSelect with Display: Chip overflow behaviorr

Issue

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.

Solution

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
}

Answered By – Brian Edwards

Answer Checked By – Willingham (Easybugfix Volunteer)

Leave a Reply

(*) Required, Your email will not be published