ionic-framework: bug: item start and end slots wrap to next line

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

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>

スクリーンショット 2024-01-02 午後3 59 35

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.

スクリーンショット 2024-01-02 午後3 58 56

Steps to Reproduce

npm i @ionic/angular@7.5.8 or npm i @ionic/angular@7.6.0

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

About this issue

Original URL
State: closed
Created 6 months ago
Reactions: 10
Comments: 26 (9 by maintainers)

Commits related to this issue

fix(item): only default slot content wraps (#28773) Issue number: resolves #28769 ---------  <!-- Please try to limit... — committed to ionic-team/ionic-framework by liamdebeasi 5 months ago

Most upvoted comments

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

liamdebeasi on Jan 25, 2024

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>

Screenshot 2024-01-17 at 2 07 42 PM

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.

bobpeck on Jan 17, 2024

Thanks for the fix!

langy on Feb 1, 2024

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!

liamdebeasi on Jan 26, 2024

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

fleboulch on Jan 19, 2024

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

pete-mcwilliams on Jan 19, 2024

@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>

Screenshot 2024-01-18 at 9 56 02 AM

bobpeck on Jan 18, 2024

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>

Screenshot 2024-01-18 at 07 52 52

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

pete-mcwilliams on Jan 18, 2024

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.

liamdebeasi on Jan 17, 2024

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.

liamdebeasi on Jan 2, 2024