Make ion-select label full width in Ionic v6

Issue

I started a new project in Ionic v6 and added a simple ion-select in html like this:

<ion-item>
        <ion-select placeholder="Select Option">
            <ion-select-option *ngFor="let o of selectOptions" [value]="o.id">{{o.title}}</ion-select-option>
        </ion-select>
    </ion-item>

It appears like this:

I inspected the generated html and I can see that ion-select is taking full width. But the label part that displays the placeholder or the selected option is not taking full width. I want the label part to also take full width so the dropdown arrow appears on far right of the parent (ion-item) instead of sticking with the text.

I have tried many options but nothing is working. Element customization in Ionic after v3 has become really confusing. Please help me out. Thanks

Solution

Always keep an eye on the CSS Shadow parts in Ionic Docs for all the components. In case of ion-select you can just edit the container shadow part of ion-select to make it's with 100%. Here is the example of CSS code:

ion-select::part(container) {
  width: 100%;
}

If you are using SCSS use the following code instead:

ion-select {
    &::part(container) {
        width: 100%;
    }
}

Answered By - Simar Preet Singh