bug: long floating label text is not truncate and overflows out of input

[holmio]

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

ion-label text is out of ion-item container.

Expected Behavior

The text should have an ellipsis if it is too long.

Steps to Reproduce

<ion-item fill="outline" mode="md"> <ion-label position="floating">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In in erat eget libero rutrum commodo. Duis sed pharetra enim.</ion-label> <ion-input type="text"></ion-input> </ion-item>

Code Reproduction URL

No response

Ionic Info

Ionic:

Ionic CLI: 6.19.0 (/Users/user/.nvm/versions/node/v16.14.2/lib/node_modules/@ionic/cli) Ionic Framework: @ionic/angular 6.1.3 @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.4.3 @capacitor/android : not installed @capacitor/core : 3.4.3 @capacitor/ios : not installed

Utility:

cordova-res : 0.15.4 native-run : 1.5.0

System:

NodeJS : v16.14.2 (/Users/user/.nvm/versions/node/v16.14.2/bin/node) npm : 8.5.0 OS : macOS Monterey

Additional Information

No response

[enrique-lozano]

Any news on this?

[liamdebeasi]

Thanks for the report. In Ionic 7 we are introducing a new syntax for working with ion-input. This issue is fixed when using that new syntax. Ionic 7 is currently in beta, and developers can find a migration guide on our documentation website: https://ionicframework.com/docs/v7/updating/7-0

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.