bug: ion select shadow dom lable can not be used in angular

[JingLeiTalan]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v7.x

Current Behavior

in an angular projet, i have

Apples
Oranges
Bananas

if i want to center like this:

with:
ion-select::part(label) {
justify-content: center;
}

Expected Behavior

Item should have been centred

Steps to Reproduce

1. https://stackblitz.com/edit/angular-hfjbaw-mipybw?file=src%2Fapp%2Fexample.component.html

Code Reproduction URL

https://stackblitz.com/edit/angular-hfjbaw-mipybw?file=src%2Fapp%2Fexample.component.html

Ionic Info

ionic 7

Additional Information

No response

[liamdebeasi]

Thanks for the report. It sounds like you want the select to be centered within a container. If so, then justify-content: center is likely not what you want here. Your CSS controls the justification of content within the label, but your example doesn't use a label. As a result, your CSS is going to have no effect.

Instead, you should instruct ion-select to use the minimum intrinsic width. Here's a demo of the select in a toolbar (to show that it is centered within a container): https://codepen.io/liamdebeasi/pen/BaELBjv

I'd recommend setting a minimum overall width too otherwise the dimensions will change based on the size of the selected content. You can also optionally move the toggle icon so it moves all the way to the end of the select (which I show in the demo). I am going to close this since the desired behavior is already available in Ionic, but let me know if you have questions.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.