p-multiselect width

UI Components for Angular
Post Reply
Leonardonline
Posts: 2
Joined: 01 Jun 2021, 16:53

01 Jun 2021, 17:02

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
Posts: 131
Joined: 19 Sep 2018, 02:52
Location: Ann Arbor, Michigan USA
Contact:

02 Jun 2021, 16:09

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
Posts: 2
Joined: 01 Jun 2021, 16:53

03 Jun 2021, 08:06

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
Posts: 131
Joined: 19 Sep 2018, 02:52
Location: Ann Arbor, Michigan USA
Contact:

04 Jun 2021, 01:48

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
Posts: 131
Joined: 19 Sep 2018, 02:52
Location: Ann Arbor, Michigan USA
Contact:

04 Jun 2021, 02:13

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
Posts: 2
Joined: 02 Oct 2020, 14:50

10 Jun 2021, 13:49

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

Post Reply

Return to “PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 7 guests