angularionic-frameworkionic6

Make ion-select label full width in Ionic v6

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: enter image description here

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%;
    }
}