CODEWITHSUNDEEP
primengangular11
Mukil Deepthi
Mukil Deepthi

Reputation: 6452

Angular11 PrimeNG multiselect how to slice the longer option label

I am using PrimeNG multiselect with Angular 11. One of the option label has got longer text. I would like to slice the label if it is more than certain length. Can anyone help me how to achieve this?

The options is

@Input() options: ISelectOption<number, string>[];

<p-multiSelect
    #multiSelect
    [options]="options"
    [(ngModel)]="values"
    optionLabel="name"
    dropdownIcon="fas fa-caret-down"
    (onChange)="onValueChange()"
    [placeholder]="placeholderText"
    display="chip"
    [optionValue]="_config?.optionValue"
    [disabled]="disabled || readonly"
></p-multiSelect>

Upvotes: 2

Views: 3849

Answers (2)

RED-ONE
RED-ONE

Reputation: 435

Instead of using ::ng-deep I used the property style like this

 <p-multiSelect
  ...
  [style]="{'min-width':'200px'}"
 ></p-multiSelect>

Upvotes: 2

Hamid
Hamid

Reputation: 908

I think you would have two solutions:

  1. loop on the options in onInit and check if the length of options exceeds the max length slice part of it and show for instance 100 characters of it

  2. set a CSS style for the multi-select component

    .p-multiselect .p-multiselect-panel { min-width: auto; max-width: 278px; }

Upvotes: 1

Related Questions