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

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):

ezgif com-video-to-gif-2

Screenshots of the provided repo:

And a screenshot of the same repo with Ionic v4:

About this issue

Original URL
State: closed
Created 4 years ago
Comments: 18 (13 by maintainers)

Most upvoted comments

Thanks! This issue has been resolved via https://github.com/ionic-team/ionic/pull/20194. We will be putting out a new beta soon that has this fix.

liamdebeasi on Jan 13, 2020

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

Thanks @liamdebeasi!

corysmc on Jan 13, 2020

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

I checked both the sample repo and our app.

peterpeterparker on Jan 13, 2020

Thanks for the follow up. Try this dev build:

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

liamdebeasi on Jan 13, 2020

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

peterpeterparker on Jan 13, 2020