bug[core, v5]: ion-content height 100% not inherited

[peterpeterparker]

Bug Report

Ionic version:
[x] 5.x

Current behavior:
In Ionic v5.x (current status, tested with @next and master) it will not be possible anymore to assign an height: 100% to the slotted element of the ion-content respectively such property will be ignored.

This would for example have for effect to break the GUI of our editor (see attached Gif).

The root cause of the issue, I think, is the recent introduction of the ion-content shadowed child <div id="scroll-content"/> (see related commit)

Expected behavior:
Still being able to use height: 100% for the content with Ionic v5.x.

Steps to reproduce:

git clone https://github.com/peterpeterparker/ionic-v5beta-content-height.git
cd ionic-v5beta-content-height
npm install
npm run start

Related code:

See demo repo

Other information:

Demo of our application (gif):

Screenshots of the provided repo:

And a screenshot of the same repo with Ionic v4:

[liamdebeasi]

Thanks for the issue. Can you try the following dev build and let me know if it resolves your issue:

npm i @ionic/core@5.0.0-dev.202001131408.8aeda3a

[peterpeterparker]

@liamdebeasi thank you for your feedback. same problem with build 202001131408.8aeda3a.

[liamdebeasi]

Hmm maybe I'm not quite sure what you are trying to do. From what I understand, you are expecting the scrollable content to take up 100% of the available containing height by default. From there, you want to be able to control the overall dimensions of ion-content by setting the dimension on ion-content directly. Is that correct?

[peterpeterparker]

@liamdebeasi yes

<ion-content>
    <div style="height: 100%">
    </div>
</ion-content>

height or min-height too I guess.

here a screenshot from our editor in prod with v4:

[liamdebeasi]

Thanks for the follow up. Try this dev build:

npm i @ionic/core@5.0.0-dev.202001131622.bfc6420

[peterpeterparker]

super @liamdebeasi 202001131622.bfc6420 do solve the issue, thx!

I checked both the sample repo and our app.

[corysmc]

I'm noticing the problem as well @liamdebeasi also with build 202001131408.8aeda3a

all my zero states don't center on the page anymore 😦

[liamdebeasi]

@corysmc Please try 5.0.0-dev.202001131622.bfc6420. That previous build had a mistake in it.

[corysmc]

should have refreshed the page before submitting my comments 😄
The latest build works now 5.0.0-dev.202001131622.bfc6420

Thanks @liamdebeasi!

[liamdebeasi]

Thanks! This issue has been resolved via #20194. We will be putting out a new beta soon that has this fix.

[peterpeterparker]

Thank you Liam 👍

[lincolnthree]

@liamdebeasi @peterpeterparker Unfortunately, this fix breaks elements with "position: sticky" inside the ion-content scroll-content div. Now that the height is set to 100%, once the div scrolls off screen, any sticky items (such as floating buttons/widgets/etc) scroll off screen with it.

This occurs when the height of the content contained inside the scroll-element exceeds 100% of the ion-content/viewport.

IMO: This should probably use the 'min-height: 100%' property, instead of 'height'.

Sample repo incoming.

[liamdebeasi]

@lincolnthree Can you open a new issue? Thanks!

[lincolnthree]

Sure thing.

[lincolnthree]

@liamdebeasi Done.

[ghost]

Hello, the problem still persists with the latest version 5.0.0-rc.0.

Any idea ?

regards,
Achille

[liamdebeasi]

@LOUNNAS Please open a new issue. Thanks!

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