rdlabo · GitHub

Prerequisites

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

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

Read the original on github.com ↗