Ionic-8 / ion-select with popover interface : label's option not wrapped

Ionic Framework
1

I’m facing an issue with ion-select of Ionic 8. I’m using the popover interface and my long labels aren’t wrapped as you can see on this picture:

image
image416×705 16.2 KB

Here’s my code:

        <ion-select [formControlName]="fControlName"
                    [interface]="getInterface()"
                    [multiple]="multiple"
                    (ionChange)="emitSelectChange($event)"
                    class="ion-text-wrap"
                    label-placement="stacked">
            <div class="ion-text-wrap workaround-multiline-select" slot="label">{{ labelKey | translate }}</div>
            <ion-select-option *ngFor="let option of optionKeys" [value]="option.value">
                <div *ngFor="let key of option.keys">{{ key | translate }} </div>
            </ion-select-option>
        </ion-select>

I tried to add the css class “ion-text-wrap” on the div but without success.

Here’s the generated html code :

image
image1207×809 102 KB

I tried to override css classes in my global.scss without success :

.sc-ion-select-popover-ios { // override by children
  white-space: normal !important;
}
:host(.sc-ion-select-popover-ios) .label-text-wrapper { // not working
    text-overflow: inherit !important;
    white-space: normal !important;
    overflow: visible !important;
}
.label-text-wrapper { // not working
  white-space: normal !important;
}

Do you have any idea how I can achieve this please ?

2

Hey there! So this is pretty similar to this question in that ino-select only grabs the text content of what’s rendered in the ion-select-option, not the actual html content.

If you’re looking to customize this to have the text wrap, you could just make your own like this

3

Hi.
Thank you for your response.
I tried your solution but it’s not working for ios platform :confused: Long labels are still truncated