bug: ion-item styling issues on SSR

[agustinhaller]

Bug Report

Ionic version:
[ ] 4.x
[x] 5.x

Current behavior:
For some reason when testing SSR with javascript disabled, rendered styles are missing some properties.
In particular inputs with both stacked and floating labels, are missing these styles:

• .input-wrapper in SSR these flex properties are not applied
• <ion-input> in SSR these padding properties are not applied
• <ion-item> in SSR this --min-height override value is not applied

Expected behavior:
<ion-item> gets rendered in SSR (with javascript disabled) with the same CSS properties it has when rendered in the browser.

Steps to reproduce:

1. Enable (SSR with Angular Universal And Ionic)[https://ionicframework.com/blog/ssr-with-angular-universal-and-ionic/]
2. Create a view with <ion-item> and floating <ion-label>
3. Run npm run dev:ssr
4. Open Chrome dev tools and disable javascript (in order to properly test SSR)
5. Observe the <ion-item> visual diff between SSR and browser rendering. Also it's missing the item-label-floating class.

Other information:

It seems to be ignoring adding the .item-label-floating class to the <ion-item> when generating the build for SSR

SSR Ionic Form (Pixel 2)

Browser rendered Ionic Form (Pixel 2)

Ionic info:

Ionic:

   Ionic CLI                     : 6.11.8 (/Users/agustin/.npm-global/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.3.3
   @angular-devkit/build-angular : 0.1001.2
   @angular-devkit/schematics    : 10.1.2
   @angular/cli                  : 10.1.2
   @ionic/angular-toolkit        : 2.3.3

Capacitor:

   Capacitor CLI   : 2.4.1
   @capacitor/core : 2.4.1

Utility:

   cordova-res (update available: 0.15.1) : 0.11.0
   native-run                             : not installed

System:

   NodeJS : v12.14.1 (/usr/local/bin/node)
   npm    : 6.14.8
   OS     : macOS Catalina

[liamdebeasi]

Thanks for the issue and apologies for the delay. In the time since this issue was opened, there have been many enhancements and fixes made to Ionic Framework that may have resolved this issue.

It is difficult for us to verify whether or not this is still an issue as no GitHub repo was provided in the original post (Code snippets are typically not enough to reproduce more complex issues). I am going to close this issue for now. If this issue is still occurring, please reply with a minimal GitHub repo that we can use to verify this behavior. At that point, we will be more than happy to reopen this issue. Thank you!

---

For more info on how to create a good code reproduction, please see https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#creating-a-good-code-reproduction.

[agustinhaller]

Hi @liamdebeasi, I will try and test these styling issues with the latest Ionic version and see if they are still happening.

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