'How to display multiple selected values in ion select?

I am using developing an PWA with Ionic 4. while using ion-select for selecting multiple values like this.

<div class="form-group">

  <ion-item>
    <ion-icon slot="start" name="briefcase"></ion-icon>
    <ion-label floating color="primary">Business Unit *</ion-label>
    <ion-select multiple="true" placeholder="Select Business" (ionChange)="onBuSelectChange($event)"
      formControlName="businessUnit" class="form-control"
      [ngClass]="{'is-valid' : submitted && f.businessUnit.errors}">
      <ion-select-option *ngFor="let unit of listBusinessUnit" [value]="unit.ID">
        {{unit.BusinessUnitDesc}}
      </ion-select-option>
    </ion-select>
    <h1 *ngIf="submitted && f.businessUnit.errors && f.businessUnit.errors.required" floating>*</h1>
  </ion-item>

</div>

I am getting following output where user is only able to see text of first selected value of ion-options.

enter image description here

I tried overriding css with the following with no success. 

.select-text {
    -ms-flex: 1;
    flex: 1;
    min-width: 190px;
    font-size: inherit;
    text-overflow: ellipsis;
    white-space: pre-line;
    overflow: hidden;
  }
cssionic-frameworkionic4


Solution 1:[1]

This is late, but I was facing the same problem in my project, The selected options didn't fit inside select item. The way I was able to solve it is creating an additional element just to show the results (I use popover interface for ion-select element). I know this is not quite a solution, but still it works and looks decent. Maybe someone else can suggest a better way, I would prefer cleaner solution, but for now this is the only way I could handle this. This is my solution based on your example:

<div class="form-group">
  <ion-item>
    <ion-icon slot="start" name="briefcase"></ion-icon>
    <ion-label floating color="primary">Business Unit *</ion-label>

    // I render select hidden
    <ion-select multiple="true" placeholder="Select Business" formControlName="businessUnit" interface="popover" #select>
      <ion-select-option *ngFor="let unit of listBusinessUnit" [value]="unit.ID">
        {{unit.BusinessUnitDesc}}
      </ion-select-option>
    </ion-select>

    // And this is visualization part. I chose chips for values visualization as it looks nicer
    <ion-item lines="none" (click)="select.open()"> // <- here I use open() function to trigger open command of select
      <ion-icon slot="end" name="caret-down-outline" class="attributi__icon"></ion-icon>
      <ion-label color="tertiary" class="attributi__label">Business units</ion-label>
    </ion-item>

    <ng-container *ngFor="let unit of listBusinessUnit">
      // here I use formControlgetter to get the current value ofselect and show only the selected items
      <ion-chip *ngIf="businessUnit.value.includes(unit.id)" color="dark" outline="true">{{unit.BusinessUnitDesc}}</ion-chip>
    </ng-container>
  </ion-item>
</div>

And this is the result, but on my project where I use it. (I don't have enought reputation to post images so here are the links)

Here are the chips And here is select popup

Solution 2:[2]

try this on your css, this work for me.

ion-select::part(text) {
    white-space: normal !important;
    word-wrap: break-word !important;
}

you can refer to this :

https://ionicframework.com/docs/api/select#styling-select-element

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2

Related Questions