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.

[theo-staizen]

Why is this just not a feature? Why are you forcing users to hack the CSS or the shadowDOM to achieve what should be something controlled by the component itself?

[brandyscarney]

Issues labeled as feature requests represent tasks we plan to add to the framework in the future. Any comments on these issues that include code examples are intended as workarounds, allowing users to achieve the desired functionality until the feature is officially implemented.