Test Suite is adding space at the top of the webpage in Personal Portfolio

[freecodecamp]

Test Suite is adding space at the top of the webpage in Personal Portfolio

[no-stack-dub-sack]

@jake-steele can you post a link to your actual pen? That would be super helpful! Thanks!

[jake-steele]

@no-stack-dub-sack Sure thing! Here it is!

[no-stack-dub-sack]

@jake-steele Have you changed something? I'm seeing 11/11 tests passing beautifully! Nice looking portfolio by the way 😄

EDIT: I even tried putting in the code exactly as you have it above and same result, still passing tests nicely

[jake-steele]

@no-stack-dub-sack Nothing has changed too much, I don't think... I just re-opened to double-check (I've been moving through the other challenges in the mean time) and it still only says 10/11 passed for me! Hmmm.... I was able to "cheese" the test suite in the past to pass the test, where if I set the height of the #welcome-section to something less than 100vh and scaled the viewport to certain sizes, it would pass... But I believe it fails both at my home and work computers. Both of the computers' monitors are 1920x1080... Is your monitor also 1920x1080? I can't think of much else it could be!

Thank you for the compliment! I'm pretty proud of the progress I've been making!

[Christian-Paul]

@jake-steele @no-stack-dub-sack

Are each of you seeing a horizontal scrollbar? I believe that's the source of the issue.

Edit: the test checks the height of the #welcome-section against "document.documentElement.clientHeight", which ends up being greater than the value of 100vh if there's a horizontal scrollbar. I believe that hiding overflow-x would make the tests pass.

However, I think users should be allowed to have a horizontal scrollbar if they please. Looks like we may need an alternative to "document.documentElement.clientHeight"

[no-stack-dub-sack]

Hey @Christian-Paul! Long time no talk, and thanks for chiming in! Ummm, no I see no horizontal scroll in my version of chrome.

@jake-steele my monitor is 15.4-inch (1440 x 900)

[jake-steele]

@no-stack-dub-sack @Christian-Paul Very nice catch! I AM seeing a horizontal scrollbar on my monitors, so that seems totally plausible!

All of the sections are set to "width: 100vw;", though, so I'm not quite sure why it's got a horizontal scroll bar? Unless it's a scroll bar to see what's hidden behind the vertical scroll bar. Is it typical that I should have to set width to <100vw total?

[Christian-Paul]

@jake-steele Thanks! It looks like you're right about what's happening; the horizontal scroll bar exists to show what's hidden behind the vertical scroll bar. I don't think it's typical to set the width to less than 100vw. In my experience, I usually allow the element width to be set automatically. However, you can set max-width: 100% in each element with width: 100vw and that should fix it. Alternatively, you can use width: 100% instead of width: 100vw, insofar as their ancestors don't overflow

[Christian-Paul]

Hi @no-stack-dub-sack. Yeah, it's been a while!

I found a fix for this issue. If we use window.innerHeight instead of document.documentElement.clientHeight, we'll have the true value of the viewport's height.

As I said before, document.documentElement.clientHeight subtracts the height of the horizontal scrollbar, however, window.innerHeight doesn't do that, so it will work whether or not the user has a horizontal scrollbar.

I'll work on a PR for this and the other issues I was mentioned in tomorrow!

[jake-steele]

@Christian-Paul @no-stack-dub-sack In case anybody else runs into the same issue: setting width for all full-width objects to 100% instead of 100vw removed the horizontal scroll bar from the bottom and allowed the tests to pass. This should suffice for people who don't want (or didn't intend to have) a horizontal scroll bar but do want to pass the test for completion's sake. ;)

Thank you both for looking into this! Have a nice day!

[no-stack-dub-sack]

Sounds perfect! Thanks @Christian-Paul!