Update the Height of an Element Dynamically Stuck

Tell us what’s happening:

Your code so far


<style>
  .bar {
    width: 25px;
    height: 100px;
    display: inline-block;
    background-color: blue;
  }
</style>
<body>
  <script>
    const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
    
    d3.select("body").selectAll("div")
      .data(dataset)
      .enter()
      .append("div")
      .attr("class", "bar")
      // Add your code below this line
      
      .style("height", (d) => {
return d + 'px';
})

      // Add your code above this line
  </script>
</body>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.77 Safari/537.36.

Link to the challenge:

Your code is working for me.

I can’t get it to pass for some reason, I’ve tried several different browsers and variations.Capture

I can get it to fail the exact same way if i zoom out in the browser, anything below 100% zoom and it fails all tests except the 25 pixels one. Not sure how it would affect different browsers though, unless you have adjusted the zoom on all of them. It is hard to really tell, but in your image, looking at the fonts, it does look a bit like you are zoomed out.

I wonder if there are display related settings that can affect the test?

1 Like

That’s interesting! I was using chrome and have it at 90%. I saw in a different thread that people were having success using Firefox so I used that browser and it passed. It probably was the zoom.

1 Like

FYI to all - I had the same problem and fixed it by putting zoom to 100% (It was at 110% before). Using Chrome browser.

2 Likes

Zoom at 100% fixed this for me in Chrome.

1 Like

Using Chrome 75.0 on macOS, I ran into the zoom issue as well. If zoom was at anything below 100% or 110% it would not pass. Exactly 100% or 125% and larger would pass.

.style("height", (d) => `${d}px`)
1 Like

Thanks! I was stuck but finally could pass the test owing to this information:smiley:

1 Like