Hello. I am having a small display issue that I cannot figure out.
This is how one of my ion-select is showing up, with the ion icon to the far right of the field. There is no overriding CSS to cause this behavior.
I would like it to display like the select usually does, with the ion icon right beside the placeholder text.
How can I do this? I do not know what is causing this behavior.
Thank you.
Hi, I think the easiest way is setting a width to the <ion-select> element.
For example:
<!-- method 1: set width -->
<ion-select style="width: 10rem" placeholder="Custom style">
<ion-select-option value="apples">Apples</ion-select-option>
<ion-select-option value="oranges">Oranges</ion-select-option>
<ion-select-option value="bananas">Bananas</ion-select-option>
</ion-select>
Or you can put the <ion-select> inside a <ion-item>, in this case, ionic framework would apply a slightly different style to the icon:
<!-- method 2: put ion-select inside ion-item -->
<ion-item>
<ion-select placeholder="inside ion-item">
<ion-select-option value="apples">Apples</ion-select-option>
<ion-select-option value="oranges">Oranges</ion-select-option>
<ion-select-option value="bananas">Bananas</ion-select-option>
</ion-select>
</ion-item>
I made a stackblitz playground (Ionic 6 + Angular 15 (ion-select style) - StackBlitz ), so you can see these changes in actions, hope this is helpful 
