How to display multiple selected values in ion select? - css

Question

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.
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;
}

Answer 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

Answer 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