[Updated: using inline CSS in JSX] Background colour not filling full height

HTML-CSS
1

Hey, I am not sure why my inline CSS isn’t being applied in the browser? Only the width property works:

<div>
          {this.props.events.map(event => {
            return (
              <div
                className="rectangle"
                style={{
                  width: `${event.customWidth}%`,
                  marginTop: `${event.start} * 0.185%`,
                  height: `${event.end - event.start} * 0.185%`
                }}
                key={event.title}
              >
                <p>
                  {event.title} begins at {event.convertedStart} and ends at{" "}
                  {event.convertedEnd}
                </p>
              </div>
            );
          })}
        </div>

I’m trying to stagger events vertically so effectively a minute by minute timeline is created.

I had additional CSS for the rectangle that I’ve commented out in case it was conflicting somehow:

.rectangle {
  display: flex;
  background-color: blue;
  opacity: 0.7;
  float: left;
  text-align: center;
}
2

It was just a syntax error, the multiplication needs to take place within the curly braces.

Admin: please feel free to delete

3

Glad to hear you’ve gotten it sorted!

1 Like
4

I think I spoke too soon… the correct height and margin values show up in the elements inspector in the browser for each rectangle, but the background colour doesn’t extend to the full height of the rectangle. The result is that all the rectangles appear to be rows with the same height, even though the height values differ.

In the screenshot, the orange section should also be blue but is currently transparent.
00

  <div
                className="rectangle"
                style={{
                  width: `${event.customWidth}%`,
                  marginTop: `${event.topMargin}%`,
                  height: `${event.height}%`,
                  backgroundColor: "blue"
                  // height: `${event.end - event.start}%`
                }}
                key={event.title}
              >
                <p style={{ height: `${event.height}%` }}>
                  {event.title} begins at {event.convertedStart} and ends at{" "}
                  {event.convertedEnd}
                </p>
              </div>
5

I assume the orange is the margin when you hover on the element?

Maybe I’m just misunderstanding you but the margin is not part of the element content box, it is outside it. The margin does not have the color the content box does.

It would be easier to help if you have something online we can look at. Images are not very useful.

6

You’re right, on the screenshot I highlighted the wrong bit (I have a custom margin and height for each). But the problem is the same, the rows appear equal height even though the height value is different for each.

You can see two of the blue rows here:

23
23816×546 149 KB

Is it okay to have percentage values like this? (It will take the full length of the screen as 100% for every div)

I’ll try and make a gist to share

7

Changing marginTop to position: absolute with a top value has made the heights become visible. I don’t know why! But it’s fixed.
Thanks :slight_smile: