bug: item start and end slots wrap to next line

[rdlabo]

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

v7.x

Current Behavior

If an element other than ion-label is used in the default slot and the width is long, slot=end will break lines.

ex:

<ion-list>
  <ion-item>
    <ion-text style="background-color: lightgreen">
      A "Hello, World!" program is generally a simple computer program.
    </ion-text>
    <div slot="end" style="background-color: yellow">[slot=end]</div>
  </ion-item>
</ion-list>

This has been occurring since v7.6.0 and does not occur in v7.5.8. In complex apps, ion-grid may be placed under ion-item, and this behavior can be a major problem.

Expected Behavior

Equivalent behavior to v7.5.8.

Steps to Reproduce

1. npm i @ionic/[email protected] or npm i @ionic/[email protected]

Code Reproduction URL

No response

Ionic Info

Ionic:

Ionic CLI : 7.1.1 (/opt/homebrew/lib/node_modules/@ionic/cli) Ionic Framework : @ionic/angular 7.6.0 @angular-devkit/build-angular : 17.0.8 @angular-devkit/schematics : 17.0.8 @angular/cli : 17.0.8 @ionic/angular-toolkit : 9.0.0

Capacitor:

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

Utility:

cordova-res : 0.15.4 native-run : 2.0.0

System:

NodeJS : v20.10.0 (/usr/local/bin/node) npm : 10.2.3 OS : macOS Unknown

Additional Information

No response

[ionitron-bot[bot]]

Thanks for the issue! This issue has been labeled as holiday triage. With the winter holidays quickly approaching, much of the Ionic Team will soon be taking time off. During this time, issue triaging and PR review will be delayed until the team begins to return. After this period, we will work to ensure that all new issues are properly triaged and that new PRs are reviewed. In the meantime, please read our Winter Holiday Triage Guide for information on how to ensure that your issue is triaged correctly. Thank you!

[liamdebeasi]

Thanks! I think we need to take a closer look at this behavior. While the text wrapping itself is correct, it looks like the end slot should not be pushed onto the next line when comparing with native iOS. I'll discuss the best course of action with the team.

[corradodellorusso]

This also happens in ios mode, when you have a clickable ion-item with a ion-label with ion-text-nowrap class.

  <ion-item  lines="none" button>
      <ion-icon color="primary" name="reader-outline" size="large" slot="start"></ion-icon>
      <ion-label class="ion-text-nowrap">Some very long text!</ion-label>
  </ion-item>

[lincolnthree]

We use ion-item for inputs, pickers, and other block level elements -- not just for text with buttons on the ends. This change has had ripple effects from our login screen to our main pages and lists.

I'm interested in testing a dev-build that fixes the end-wrapping behavior to see if it makes it possible for us to navigate the changes required to accommodate this new item layout spec. I think that fixing the end slot wrap should take care of most of it.

Also, any suggestions for a global CSS rule to make this work "the way it did before"?

[harry-molyneux]

I've found that this appears to be an issue with the flex property of the <div class="input-wrapper"> element. In previous versions of Ionic, I noticed that this element had flex: 1 1 0%;. If this style is applied, the issue appears to be resolved.

Therefore, I believe that the expected behaviour/fix is that the <div class="input-wrapper"> element within the shadow-root of an <ion-item> should have flex: 1 1 0%; if it contains an <ion-label> with class="ion-text-nowrap" (unless there would be any known side-effects of changing this style).

[lincolnthree]

I've found that this appears to be an issue with the flex property of the <div class="input-wrapper"> element.

Yeah, that's right. They changed this intentionally to support wrapping: https://github.com/ionic-team/ionic-docs/issues/3313#issuecomment-1854461730

I think this should be a breaking / non-backwards compatible UI change, but that's just me. Or at least it should be done outside of the shadow-DOM, or with a CSS "off switch" so we can control how this behavior works globally in our app CSS.

[liamdebeasi]

Can everyone try the following dev build and let me know if it resolves the reported issue?

7.6.5-dev.11704916749.1e64a3a7

The start, default, and end slot containers will no longer wrap to new lines. However, content within each slotted container can still wrap.

CodePen sample: https://codepen.io/liamdebeasi/pen/xxBERbN?editors=1010

[harry-molyneux]

@liamdebeasi it is working perfectly for me with that dev build.

[rdlabo]

@liamdebeasi Thanks for your quick work. The slot=start problem is fixed, but not yet for ion-label[position=fixed].

https://github.com/ionic-team/ionic-framework/issues/28780

7.6.5-dev.11704916749.1e64a3a7 work: https://codepen.io/rdlabo/pen/NWJbWRE?editors=1010

[lincolnthree]

@liamdebeasi This build works WAY better. I think we can probably resolve most of the issues with the start/end slots working like this.

[bobpeck]

I tested 7.6.5-dev.11704916749.1e64a3a7 and 7.6.5 and the issue continues to persist.

<ion-item button detail="true">
  <ion-label class="ion-text-nowrap">
   Multi-line text that should ellipsis when it is too long to fit on one line. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </ion-label>
</ion-item>

I'm struggling to come up with a css solution. The only temporary fix i can think of is to truncate the text in the template with a javascript splice. I also tried line clamp as an alternative to ion-text-nowrap, but the results were the same. the detail arrow goes to the next line.

[liamdebeasi]

The slot=start problem is fixed, but not yet for ion-label[position=fixed].

Thanks for testing, I'll take a closer look.

I tested 7.6.5-dev.11704916749.1e64a3a7 and 7.6.5 and the issue continues to persist.

Thanks for testing. The chevron arrow icon isn't part of the start/end slots which is why my dev did not fix the issue. However, this is a very similar problem that we should fix too. I'll work on making that change.

[pete-mcwilliams]

In 7.6.5 the end slot issue remains with the following

<ion-item>
  <ion-label class="ion-text-nowrap">
    Multi-line text that should ellipsis when it is too long to fit on one line.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </ion-label>
  <div slot="end">Not end</div>
</ion-item>

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

[harry-molyneux]

I tested 7.6.5-dev.11704916749.1e64a3a7 and 7.6.5 and the issue continues to persist.

<ion-item button detail="true">
  <ion-label class="ion-text-nowrap">
   Multi-line text that should ellipsis when it is too long to fit on one line. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </ion-label>
</ion-item>

@bobpeck , unless I am missing something it appears to be working perfectly for me on the dev build 7.6.5-dev.11704916749.1e64a3a7. See repo here: https://github.com/harry-molyneux/ionic-item-label-wrapping-bug

The second example on the form page is the same as yours and it is wrapping well with the detail arrow:

<ion-item button="true" detail="true">
    <ion-label class="ion-text-nowrap">
        Basic label with ion-text-nowrap: Multi-line text that should wrap when it is too long to fit on one line. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </ion-label>
</ion-item>

Like I say, please let me know if I am missing something but this seems to be working well and I would like to see this made available ASAP. Thanks for your quick work @liamdebeasi

[bobpeck]

@harry-molyneux @liamdebeasi apologies, when testing, i updated @ionic/core, not @ionic/angular. When testing @ionic/angular": "7.6.5-dev.11704916749.1e64a3a7 I see the expected behavior! Harry thank you for the check, and Liam, thank you for your work.

current test:

<ion-item button detail="true">
  <ion-label class="ion-text-nowrap">
    Multi-line text that should ellipsis when it is too long to fit on one line. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </ion-label>
</ion-item>

[liamdebeasi]

Here's a new dev build that should resolve the issue noted in https://github.com/ionic-team/ionic-framework/issues/28769#issuecomment-1888500202

7.6.5-dev.11705617758.19ab0dd2

[aeharding]

Another workaround I've been using is to add item-legacy class to IonItem (probably will go away in the future, but interim fix)

[fleboulch]

I have the same issue as https://github.com/ionic-team/ionic-framework/issues/28769#issuecomment-1897968744

[liamdebeasi]

@fleboulch Does the issue go away if you use the dev build?

[pete-mcwilliams]

The dev build fixes my issue. https://github.com/ionic-team/ionic-framework/issues/28769#issuecomment-1897968744

[fleboulch]

The last dev build fixed the issue. Thanks a lot @liamdebeasi for your amazing work! Have a good day

[sebastiencrevier]

When can we expect this fix to be released? I tried with the latest Ionic version 7.6.6 and it seems to have the same issue?

[liamdebeasi]

The PR is still in review. Once it is merged, this issue will be closed.

[liamdebeasi]

This has been resolved via https://github.com/ionic-team/ionic-framework/pull/28773, and a fix will be available in an upcoming release of Ionic Framework. We appreciate everyone's patience while we worked to resolve this issue. We realize this bug was disruptive, and we will try to be more mindful of this in the future. Let me know if you have any questions. Thanks!

[langy]

Thanks for the fix!

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