bug: Cannot make ion-checkbox label wrap text

[inorganik]

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

Using the new modern syntax for <ion-checkbox>, the label text will get truncated if it's too long, and there is no way to make it visible.

<ion-item>
  <ion-checkbox
    mode="md"
    justify="space-between"
    (ionChange)="handleReasonSelect($event, reason.id)"
  >{{ reason.name }}</ion-checkbox>
</ion-item>

Result:

There doesn't appear to be any selector that will allow me to force the text to wrap. I've tried lots of variations of the following:

ion-checkbox .label-text-wrapper {
  white-space: normal !important;
}

There aren't any custom properties or shadow parts I can use to target the label.

Expected Behavior

There should be a custom css property or some way that I can make the label wrap so the full text is visible.

Steps to Reproduce

Using ionic v7, use ion-checkbox with the modern label syntax in a constrained width, (eg a mobile device) and add a long label.

Code Reproduction URL

No response

Ionic Info

Ionic:

Ionic CLI : 7.1.1
Ionic Framework : @ionic/angular 7.0.5
@angular-devkit/build-angular : 14.2.11
@angular-devkit/schematics : 14.2.11
@angular/cli : 14.2.11
@ionic/angular-toolkit : 9.0.0

Capacitor:

Capacitor CLI : 4.8.0
@capacitor/android : 4.8.0
@capacitor/core : 4.8.0
@capacitor/ios : 4.8.0

Utility:

cordova-res : not installed globally
native-run : 1.7.2

System:

NodeJS : v16.18.1
npm : 8.19.2
OS : macOS Unknown

Additional Information

No response

[inorganik]

I discovered a workaround, to place a styled span tag around the label. But I think we should have a way to wrap the label without the span

<ion-item>
  <ion-checkbox
    mode="md"
    justify="space-between"
    (ionChange)="handleReasonSelect($event, reason.id)"
  ><span class="wrap">{{ reason.name }}</span></ion-checkbox>
</ion-item>

.wrap {
  white-space: normal;
}

[liamdebeasi]

Thanks for the report. We provide ion-text-wrap utility classes for this purpose:

<ion-checkbox>
  <div class="ion-text-wrap">This is my long label text This is my long label text This is my long label text This is my long label text</div>
</ion-checkbox>

See https://ionicframework.com/docs/layout/css-utilities#text-alignment for more information.

[inorganik]

Thank you for the reply @liamdebeasi . I did try using the ion-text-wrap class on both the ion-checkbox and ion-item, neither wrap the checkbox label text.

What you've done, putting it on a div around the label text is the same as my workaround. Would be nice semantically if we didn't need to wrap the text inside the ion-checkbox element.

[liamdebeasi]

Would be nice semantically if we didn't need to wrap the text inside the ion-checkbox element.

Do you have an example of what you'd like to be able to do instead?

[inorganik]

Just like this:

<ion-checkbox class="ion-text-wrap">Long label text...</ion-checkbox>

[liamdebeasi]

Thanks for the feedback. I discussed this with the team, and this is not a change we are looking to make at this time. We think there will be the expectation that the proposed patterns works for all form controls, not just checkbox. Unfortunately, implementing this pattern for components such as ion-range can have unintended side effects where content in the start and end slots also wrap, which may not be the desired behavior.

For content that is slotted we typically recommend using a wrapper element as noted in #27509 (comment). While it may be a bit more verbose than desired, it allows full control over the label text node. I am going to close this, but let me know if you have questions.

[inorganik]

Thanks very much for the consideration. Really enjoy the Ionic framework.

On Wed, May 24, 2023 at 1:17 PM Liam DeBeasi ***@***.***> wrote: Closed #27509 <#27509> as not planned. — Reply to this email directly, view it on GitHub <#27509 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAA2X4IUGGXZPRX33OQNJBLXHZND5ANCNFSM6AAAAAAYHATEOU> . You are receiving this because you authored the thread.Message ID: ***@***.***>

-- Sent from Gmail Mobile

[Logik03]

@liamdebeasi hopefully the team was able to consider @inorganik suggestion? being able to do this will be the ion-checkbox on steroids , keep up the great work @

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