feat: select with justify "center" option

[st474ddr]

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

I have already seen the article before. https://github.com/ionic-team/ionic-framework/issues/27296 However, when I place an ion-select inside an ion-col, the methods mentioned in the article are ineffective.

Describe the Use Case

My code:

 <ion-grid>
                <ion-row :class="selectValue === 'group' ? 'ion-justify-content-around' : 'ion-justify-content-center'">
                    <ion-col :size="selectValue === 'group' ? '3' : '6'">
                        <ion-select aria-label="TeamsType" :toggle-icon="caretDownSharp" 
                            interface="popover" v-model="selectValue">
                            <ion-select-option value="personal">personal</ion-select-option>
                            <ion-select-option value="group">group</ion-select-option>
                        </ion-select>
                    </ion-col>
                    <ion-col size="3" v-if="selectValue === 'group'">
                      test
                    </ion-col>
                </ion-row>
            </ion-grid>

I also add the CSS property

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

And it would look like:

The image shows that the ion-select is not centered.

By using developer tools

It can be inferred that an invisible block is causing the select layout to be displaced.

Describe Preferred Solution

1. Please provide a method to enable justify-content: center for ion-select.
2. Eliminate the invisible flex block.

Describe Alternatives

No response

Related Code

No response

Additional Information

No response

[liamdebeasi]

Thanks for the report. It sounds like you want the select to be centered within the ion-col container. If so, then justify-content: center is likely not what you want here. The justify option controls the spacing between the label and the control itself. Your application does not use a label, so justify would have no effect.

Instead, you should instruct ion-select to use the minimum intrinsic width. Here's a demo: https://codepen.io/liamdebeasi/pen/NWoZWvW

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.

[st474ddr]

It works. Appreciate it.

[ionitron-bot[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.