Comments (11)
@jake-steele can you post a link to your actual pen? That would be super helpful! Thanks!
from testable-projects-fcc.
@no-stack-dub-sack Sure thing! Here it is!
from testable-projects-fcc.
@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
from testable-projects-fcc.
@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!
from testable-projects-fcc.
@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"
from testable-projects-fcc.
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)
from testable-projects-fcc.
@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?
from testable-projects-fcc.
@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
from testable-projects-fcc.
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!
from testable-projects-fcc.
@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!
from testable-projects-fcc.
Sounds perfect! Thanks @Christian-Paul!
from testable-projects-fcc.
Related Issues (20)
- test issue when i'm working with survey project , test shows test failed list of tribute page HOT 1
- Test failing but test requirement has been met HOT 1
- getting an error on product landing page #landing test. it says the navbar should always be at the top of the page. the navbar is at the top of my page but i am still receiving the error. HOT 1
- FCC Personal Portfolio - Can't get Layout #3 test to pass regarding navbar and viewport HOT 2
- project verification script not detecting required id tags in my code HOT 1
- User Story #11: Within the form, there is a submit input with a corresponding id="submit" HOT 1
- Test scripts are not correct HOT 1
- Personal Portfolio Project Bugs
- i think this is bog, 3 hour i am trying HOT 1
- Pomodoro Clock #15 Test of "25 + 5" Test Suite May Be Yielding Incorrect Results HOT 3
- Survey Form Test Issues
- FCC: Tribute Page
- Potrfolio tests: typo in #Content test number 4
- the test is not running HOT 1
- Markdown Preview tests not compatible with Vue HOT 1
- TypeError: Cannot read property '1' of null for Pomodoro clock. Why?????!!!!!!! HOT 1
- Issue with image running Tribute Page tests HOT 2
- Dependency Dashboard
- Build a JavaScript Calculator tests typo HOT 3
- incomplete fix for 25+5 with React@18 in #1485
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from testable-projects-fcc.