feat: ion-select centering option

[TiBz0u]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already include this feature request, without success.

Describe the Feature Request

Hi, I would like to be able to have an option on the ion-select to center the dropdown (with or without the label). Thanks!

@amandaejohnston @Lechevallier

Describe the Use Case

This is the target

Describe Preferred Solution

I suppose we can add a center option into the select linked SCSS. See here https://github.com/ionic-team/ionic-framework/blob/44e1977e98b9b5a5556477dfbc5e7cba31c8c0e3/core/src/components/select/select.scss#L360-L373

Describe Alternatives

No response

Related Code

No response

Additional Information

There was already a similar ticket for react project However, I cannot applied this on Angular project with the latest 7.x.

Ionic:

Ionic CLI : 7.2.0 Ionic Framework : @ionic/angular 7.8.5 @angular-devkit/build-angular : 17.3.3 @angular-devkit/schematics : 17.3.3 @angular/cli : 17.3.3 @ionic/angular-toolkit : 11.0.1

Capacitor:

Capacitor CLI : 6.0.0 @capacitor/android : 6.0.0 @capacitor/core : 6.0.0 @capacitor/ios : 6.0.0

[brandyscarney]

If you are using the ion-select inside of an ion-item, this can be achieved with the following CSS:

ion-select {
  width: auto;
  margin: 0 auto;
  flex: initial;
}

Here is a StackBlitz example: https://stackblitz.com/edit/angular-wrjnsv?file=src%2Fapp%2Fexample.component.css

I will mark this as a feature request though to look into adding "center" as an option for the justify property. Thank you!

[TiBz0u]

Hi @brandyscarney , Thanks for you quick feedback ! It's working !

However, the result of applying this solution is a little different. Here the ion-select is centered in the ion-item. Not his content centered inside of an ion-select.

For information, after some testing, I figured out a directive that use the ShadowDom API to apply the 'centering' option

this.el.nativeElement.shadowRoot.querySelector('.select-wrapper').setAttribute('style', 'justify-content: center !important');

Kr.