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

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> 

I get this result

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


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

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

1 Like

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

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