bug: md, outline select long label overflows outside of container

[enrique-lozano]

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 report this problem, without success.

Ionic Framework Version

• [ ] v4.x
• [ ] v5.x
• [X] v6.x
• [ ] Nightly

Current Behavior

When you create an item with an ion-select multiple inside it, if there are many options selected, the displayed text overflows outside the item.

This does not happen when there are already fewer options selected (the text to display is shorter). This makes me think that it is not a problem with the select, but with the ion-item when it is in fill=outline mode and has a very long text to display.

Expected Behavior

The ion-item component should always look like in case 2, discussed above

Steps to Reproduce

<ion-item fill="outline" >

    <ion-label>My select</ion-label>

    <ion-select [value]="['1','2','3','4','5']" multiple="true">
        <ion-select-option value="1">Lorem 1</ion-select-option>
        <ion-select-option value="2">Lorem 2</ion-select-option>
        <ion-select-option value="3">Lorem 3</ion-select-option>
        <ion-select-option value="4">Lorem 4</ion-select-option>
        <ion-select-option value="5">Lorem 5</ion-select-option>
    </ion-select>

</ion-item>

At startup all default options are checked, causing the component to fail. As soon as you uncheck a couple of options, the component is already displayed correctly

Code Reproduction URL

No response

Ionic Info

Ionic:

Ionic CLI : 6.17.1 (C:\Users\kikel\AppData\Roaming\npm\node_modules@ionic\cli)
Ionic Framework : @ionic/angular 6.1.8 @angular-devkit/build-angular : 13.2.6 @angular-devkit/schematics : 13.2.6 @angular/cli : 13.2.6 @ionic/angular-toolkit : 6.1.0

Capacitor:

Capacitor CLI : 3.5.1 @capacitor/android : 3.5.1 @capacitor/core : 3.5.1 @capacitor/ios : not installed

Utility:

cordova-res : 0.15.4 native-run : 1.6.0

System:

NodeJS : v14.15.4 (C:\Program Files\nodejs\node.exe) npm : 6.14.10 OS : Windows 10

Additional Information

No response

[liamdebeasi]

Thanks for the issue. I can reproduce this. We can fix this by setting width: fit-content on ion-select and removing the overflow: visible on the host ion-item. However, we need to be careful when removing overflow: visible. It appears to be a Material Design-specific style, but it may not be needed anymore.

[enrique-lozano]

Any news on this? @liamdebeasi

[EinfachHans]

@liamdebeasi Removing overflow: visible doesn't work in combination with a floating label:

Wouldn't it work to set a max-width: 100% on .item-inner and .input-wrapper?:

[Joaovm3]

@EinfachHans can you help me how to set the max-width: 100% in the .item-inner and .input-wrapper properties of the ion-item?

The code below doesn't work for me

[EinfachHans]

@Joaovm3 i guess you can't nest styles within a part selector. This is something ionic would need to adjust, or you can add these styles via javascript

[Joaovm3]

Sure @EinfachHans. I found a workaround for this bug:

@enrique-lozano Adding the width property with any value in pixels, the text reverts to behaving as it should.

However, how could I add this property manually using js?

[liamdebeasi]

Thanks for the report. In Ionic 7 we are introducing a new syntax for working with ion-select. This issue is fixed when using that new syntax. We will have an Ionic 7 beta in the future where developers can test and provide feedback. There will also be a migration guide to show how to update to the new select syntax.

The work required to resolve this has been completed, so I am going to close this thread. Let me know if there are any questions.

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