feat: ion-select centering option

[TiBz0u]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• 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

ionic-framework/core/src/components/select/select.scss

Lines 360 to 373 in 44e1977

	// Select Justify
	// --------------------------------------------------
	:host(.select-justify-space-between) .select-wrapper {
	justify-content: space-between;
	}
	:host(.select-justify-start) .select-wrapper {
	justify-content: start;
	}
	:host(.select-justify-end) .select-wrapper {
	justify-content: end;
	}

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.