p-multiselect width

[Leonardonline]

Hi to all,

the p-multiselect componet seems to have problem on the width both with chips or elipsis.
The width increases without any control and there is no way to limit it.

In the doc page it's working, but in the stackblitz (for example) it is not working!

[PhilHuhn]

Hey:

You could try panelStyle:

Code: Select all

<p-multiSelect [options]="cities" [(ngModel)]="selectedCities1"
    defaultLabel="Select a City" optionLabel="name"
    [panelStyle]="{'width':'400px'}">
</p-multiSelect>

Alternately, this is the CSS from the Stackblitz example:

Code: Select all

:host ::ng-deep .p-multiselect {
    min-width: 15rem;
}

:host ::ng-deep .multiselect-custom-virtual-scroll .p-multiselect {
    min-width: 20rem;
}

:host ::ng-deep .multiselect-custom {
    .p-multiselect-label {
        padding-top: .25rem;
        padding-bottom: .25rem;
    }

    .country-item-value {
        padding: .25rem .5rem;
        border-radius: 3px;
        display: inline-flex;
        margin-right: .5rem;
        background-color: var(--primary-color);
        color: var(--primary-color-text);

        img.flag {
            width: 17px;
        }
    }

    .country-placeholder {
        padding: 0.25rem;
    }
}

[Leonardonline]

I've tried both solutions and they don't work. When I select some elements the width grows out of control.

The same behavior is achieved in stackblitz when selecting some elements

[PhilHuhn]

Hey:

I don't know what you mean by grow out of control.

If you want the panel and the input the same size then you apply that to [style] and follows:

Code: Select all

<p-multiSelect [options]="cities" [(ngModel)]="selectedCities1"
    defaultLabel="Select a City" optionLabel="name"
    [style]="{'width':'400px'}"
    [panelStyle]="{'width':'400px'}">
</p-multiSelect>

[PhilHuhn]

Hey:
Alternately, you can constrain it into a div as follows:

Code: Select all

<div style='width: 400px;'>
  <p-multiSelect [options]="cities" [(ngModel)]="selectedCities1"
      defaultLabel="Select a City" optionLabel="name"
      [style]="{'width':'100%'}"
      [panelStyle]="{'width':'100%'}">
  </p-multiSelect>
</div>

[nadeem@theamins.com]

we limit the display with maxSelectedLabel to avoid the mess. and you can use show tooltip or overlay for selected values