CSS acting up in the SoloLearn app

Question

Hi, everyone! :) Check this out: https://code.sololearn.com/WQuvpLd1nUUx/

The above page links to a code that works in all browsers - PC and mobile (Android). But one thing doesn't work the same in the SoloLearn OUTPUT and although I reported the issue to the SoloLearn team, they suggested I should ask a question within the community.

What doesn't work as everywhere else, is the "switchMessage" div, which is in the document but you can't tap it inside the SoloLearn app because it's 0 pixels in height. If you take a look at the JS tab, you'll notice the first line of code outputting the width and height of the div, which displays 0px in the SoloLearn app and a bigger number in any browser (outside the app).

The CSS is the key here. I used "height: 100%", which doesn't work in SoloLearn, and if I use a size in "px", "vw", or "vh" it works inside the app as well.

So why doesn't "%" work in this instance in the SoloLearn app? To me, it looks like a bug. What's your stance on this issue?

Answer 1

Set

html, body {
height: 100%;
}

Answer 2

This is webview configuration issue.
Check out this
https://stackoverflow.com/questions/39049071/android-webview-how-to-let-the-css-use-the-entire-height-w-position-absolute/39111065

You could suggest Sololearn configures the webview setting accordingly perhaps.

Answer 3

Calviղ 's answer is correct. Relative heights in percentages require parent elements to have a height defined.

Otherwise it's 100% of "not set"; effectively 0.

See this for a very nice overview of using percentages properly, including numerous "won't work" examples + avoiding the mess by using view height:
https://stackoverflow.com/questions/31728022/why-is-percentage-height-not-working-on-my-div/31728799#31728799

Answer 4

So it's not a bug, but a misconfiguration. I wonder what SoloLearn will say about that. 😋

Thanks for your replies. As I mentioned in my "question", the problem goes away if I use px, vw or vh, but it should've worked with % as well, like everywhere else.

Thanks again. 👍

Answer 5

Thanks, Kirk Schafer . That's a great explanation, although when I reach the HTML tag I can also ask: 100% of what? 😂 The viewport, the whole rendering of the document, or something else?

But at least it's more clear now. And while the many ways to fix this problem do a god job, you're still left wondering why would the browsers treat this case differently.