bug: ion-note does not center in ion-item in Angular18/Ionic 8 app

[donnydg4]

Describe the Bug

ion-note does not center in my ion-item. I have tried what I know - I have no global css variables for it. I don't know what's going wrong:

Expected Behavior

ion-note should properly align like in the stackblitz: https://stackblitz.com/edit/angular-4fnrmj?file=src%2Fapp%2Fexample.component.html

Steps to Reproduce

I copied over the code from the Ionic stackblitz.
I pasted it into my project and imported everything.
I ran the code and it doesn't align properly

Screenshots

No response

Operating System

Windows 11

Browser

Chrome/Edge

Version

Whatever the newest is

Additional Information

Here is my code:
<ion-card-content> <ion-item [button]="true" lines="none"> <ion-note slot="start">1</ion-note> <ion-label> <h2>H2 Heading</h2> <p>Paragraph</p> </ion-label> <ion-note slot="end">6:11</ion-note> </ion-item> <ion-item lines="none"> <ion-note slot="start">1</ion-note> <ion-label> <h2>H2 Heading</h2> <p>Paragraph</p> </ion-label> <ion-note slot="end">6:11</ion-note> </ion-item> </ion-card-content>
dependencies:
"dependencies": { "@angular/animations": "^18.2.0", "@angular/cdk": "^18.2.0", "@angular/common": "^18.2.0", "@angular/core": "^18.2.0", "@angular/forms": "^18.2.0", "@angular/material": "^18.2.0", "@angular/platform-browser": "^18.2.0", "@angular/platform-browser-dynamic": "^18.2.0", "@angular/router": "^18.2.0", "@capacitor/clipboard": "^6.0.0", "@ionic/angular": "8.4.0", "@ionic/core": "8.4.0", "express": "^4.18.2", "howler": "^2.2.4", "ionicons": "^7.4.0", "ngx-pagination": "^6.0.3", "path": "^0.12.7", "rxjs": "~7.8.0", "swiper": "^9.4.1", "tslib": "^2.2.0", "zone.js": "~0.14.10" },

[brandyscarney]

Thank you for the issue! Based on the first screenshot, it appears that you are viewing the app in md mode, which aligns the note to the top. You can observe this behavior in the following StackBlitz example: StackBlitz.

The second screenshot from the StackBlitz link you shared shows the app in ios mode, where the note is centered. This behavior is hardcoded in the app.module.ts file in the provided StackBlitz example.

For more details about Ionic modes, you can refer to the official documentation: Ionic Modes.

When viewing the app in a browser, it will default to md mode. You will have to override the md styles if you'd like the note to be centered for md as this aligns with the Material Design specs for metadata.