Freecodecamp: [beta] FCC Test Suite sets all checkbox'es to the left top

[Gardemarin]

FCC Test Suite sets all checkbox'es to the left top

Issue Description

FCC Test Suite sets all checkbox'es to the left top with position attribute and hides it with opacity: 0

input[type=checkbox] {
    height: 24px;
    width: 25px;
    position: fixed;
    top: 7px;
    left: 20px;
    border: 1px solid black;
    opacity: 0;
    cursor: pointer;
    z-index: 99999;
}

Browser Information

• Browser Name, Version:
• Operating System:
• Mobile, Desktop, or Tablet:

Screenshot

[Greenheart]

@Gardemarin I'm not sure I understand what you mean. Could you please clarify? :blush:

@freeCodeCamp/moderators I've never seen these test suites before. Are these the official ones that in the future will be integrated with freecodecamp.com?

[dhcodes]

@Greenheart projects on beta now have a test-suite to make sure the user-stories are met. Ex. http://codepen.io/FCC_test_suites/pen/JbgXab

[Gardemarin]

My example:
http://codepen.io/Gardemarin/pen/wgqYWZ

[Greenheart]

@dhcodes Thanks! I thought these should be integrated with freecodecamp.com - but it makes sense plan that for the upcoming multi-file editor release.

@Gardemarin I understand your issue now after experimenting a bit. But I'm not sure how to fix it :confused:

[raisedadead]

/cc @no-stack-dub-sack mind taking a look?

[thomlom]

I'm experiencing the issue too.

It seems that all the input of type checkboxes don't have the checkbox because of the test suite.

With the test-suite imported :

Without the test-suite imported :

It seems that it's the test_suite_skeleton that causes the bug :
https://github.com/freeCodeCamp/testable-projects-fcc/blob/master/src/assets/test_suite_skeleton.js

In fact, one of the CSS rules modify all the checkboxes input input[type=checkbox],
Replace input[type=checkbox with #toggle might fix the bug.

[QuincyLarson]

@no-stack-dub-sack should we refactor the test suite's CSS so that none of its styles pollute a project's own CSS?

[no-stack-dub-sack]

@QuincyLarson @raisedadead sorry, I missed this until now, been finding it a tad tricky to keep up with all the notifications!

Yes, this was a good catch, and @weezlo and I had been discussing a way to keep the test suite CSS from polluting the project CSS and vise versa, and I can certainly make it a bit higher priority now that they are in much more frequent use. Also, saw @thomlom's PR on the repo and am going ahead and merging it in.

I'll also open an issue there to keep track of this. Thanks for the input @thomlom & @Gardemarin!

[no-stack-dub-sack]

This issue has been resolved via the above PR on the testable projects repo. Closing.