Ionic 7: how to avoid ion-select label to be truncated with ellipsis?

Ionic Framework Ionic Angular
1

i’m trying the new ionic 7 update and i’m facing an issue with the label.

In my case, using a ion-select, if I do something like this:

    <ion-select label="my label can be this" label-placement="fixed" aria-label="aria">
       <ion-select-option value=0>1</ion-select-option> 
       <ion-select-option value=1>1</ion-select-option> 
    </ion-select>

I get this result

image
image858×142 8.34 KB

there is a way to avoid the ellipsis or at least extend the width?

I can see there is a class that sets up this thing:

:host(.select-label-placement-fixed) .label-text-wrapper {
    flex: 0 0 100px;
    width: 100px;
    min-width: 100px;
    max-width: 200px;
}

but I dont know how to modify it

thanks!

ps: i dont think it’s my code problem, because if I try to put a long text in the ionic 7 documentations happens the same with a fixed Label

image
image1518×524 23.4 KB

2

that sounds like a bug. I would suggest open an issue at ionic githup repo

1 Like
3

Has this been opened as a bug in Github yet? I am having this same problem.

4

I’ve had this same problem. I had to add a root style to increase the width of the label to fix the issue.