0

I am trying to make an order book widget. I am imitating this example on codesandbox where it has a span in td with position: relative and a percent div with its 'positionset toabsolute` and then it dynamically setting the width accordingly.

the code is like this


td span {
  position: relative;
  z-index: 2;
}

table.Asks .percent {
  background-color: #fae9f1;
  z-index: 0;
}

table.Bids .percent {
  background-color: #f1f9e8;
}

td .percent {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
}

So I was trying to do the same. Here is a live demo of what I did. The problem is it seems that all of the bars appear vertically instead of horizontally. I cannot figure out what went wrong there.

Joji
  • 4,703
  • 7
  • 41
  • 86

1 Answers1

0

Your td is missing position: relative; so the absolute positioned element is not positioned relative to it

table .price {
  position: relative;
  color: red;
}

sandbox: https://codesandbox.io/s/recursing-keldysh-wj3jd?file=/src/styles.css

T J
  • 42,762
  • 13
  • 83
  • 138