Freecodecamp: [Beta] Applied Visual Design challenge passes test when incomplete

Created on 5 Jan 2018 · 13Comments · Source: freeCodeCamp/freeCodeCamp

Challenge Name

https://beta.freecodecamp.org/en/challenges/applied-visual-design/lock-an-element-to-its-parent-with-absolute-positioning

Issue Description

The test is asking to set the #searchbar element to position: absolute; and to give it an offset of top and right of 0px. The issue is that the test passes if you leave out the top offset and right offset.

I know leaving out the top and right offset is the same as not setting it in the first place but if I look at the bottom of the screen where it shows what the test is looking for it does say the code should use the CSS offsets.

Browser Information

Browser Name, Version: Chrome, Version 63.0.3239.132 (Official Build) (64-bit)
Operating System: Linux Mint 18.2
Mobile, Desktop, or Tablet: Desktop

Screenshot

help wanted learn

Source

Asjas

👍1

All 13 comments

Hey there!, Can you share your full code as well? Thanks.

raisedadead on 5 Jan 2018

Hi.
This is the full code I ran.


<style>
  #searchbar {
    position: absolute;  
  }
  section {
    position: relative;
  }
</style>
<body>
  <h1>Welcome!</h1>
  <section>
    <form id="searchbar">
      <label for="search">Search:</label>
      <input type="search" id="search" name="search">
      <input type="submit" name="submit" value="Go!">
    </form>
  </section>
</body>

Asjas on 5 Jan 2018

Hmm interesting.. I cant seem to reproduce.

raisedadead on 5 Jan 2018

I tested this on a Windows 10 machine right now as well. Tested using Chrome 63 and FF 57.

The code passes on my machine. But according to what it seems to be testing for it should only pass if I set top: 0px; and right: 0px;. I don't think it should pass if I leave those two settings out.

I just tested by running this code and this code also passed on my side.

<style>
  #searchbar {
    position: absolute;
    left: 10px;
  }
  section {
    position: relative;
  }
</style>
<body>
  <h1>Welcome!</h1>
  <section>
    <form id="searchbar">
      <label for="search">Search:</label>
      <input type="search" id="search" name="search">
      <input type="submit" name="submit" value="Go!">
    </form>
  </section>
</body>

If I set the left offset to 10px it shouldn't pass either but for me it does.

Asjas on 5 Jan 2018

Yes, I can reproduce with your above code. Thanks for reporting.

raisedadead on 5 Jan 2018

Hi @raisedadead, are you working on it? I would really like to help in fixing the bug.

sagarjhaa on 5 Jan 2018

Hey @sagarjhaa, nope I am not working on this, just labeled it like so for anyone to take it up. Please feel free to take a look and fix the test.

Should you need any assistance we hang out in Contributors Chat room!

Happy contributing.

raisedadead on 6 Jan 2018

Working on it. Thanks @raisedadead

sagarjhaa on 6 Jan 2018

👍1

@sagarjhaa Any updates?

vkWeb on 13 Jan 2018

@vkWeb there is one thing I noticed that by default top and right are 0px and just setting the position clears the test. One suggestion from my end is to use something other than 0px it will help us validate better and also let user see the difference in UI.
Let me know what do you think.

sagarjhaa on 13 Jan 2018

👍1

@sagarjhaa Yes, you're right. As telling our campers to set the values to 0px doesn't make sense. Maybe we should try like around 0.5px. Your thoughts on this?

@raisedadead Should we do that? (Brother, sorry for keeping you busy.)

vkWeb on 13 Jan 2018

@vkweb, @raisedadead I tried and tested that 0.5px for both top and right works and it does give user the visual feedback that it positioned. Let me know and I will make changes and push it in.

sagarjhaa on 14 Jan 2018

@sagarjhaa Yes, please make the changes and push them. Good luck.

vkWeb on 15 Jan 2018

Was this page helpful?

0 / 5 - 0 ratings