rescaling div inside a table cell

Question

I'm trying to add a simple upvote/downvote counter into each row of a table. The counter is basically a container of divs shaped by css, that I'm inserting into a table cell. However, as is, the vote counter causes the row to balloon up. I trying resizing the top most div container but it only resizes the voting elements. The actual counter remains the same size. I'm new to css so I don't have a good sense of things yet. What is the best way to rewrite my CSS so I can easily scale the entire vote counter from the topmost level, without having to manually change all the sub-elements? This would be great if I wanted to stick this counter somewhere else on my site, not inside a table cell.

Here is the jsfiddle. https://jsfiddle.net/havok2063/30way48v/

Very simple html describing the upvote/downvote counter.

<div class="vote circle">
    <div class="increment up"></div>
    <div class="increment down"></div>

    <div class="count">8</div>
</div>

Here is the CSS.

.vote {
  display: flex;
  flex-direction: column;
  position: relative;
  width: 10rem;
  height: 10rem;
}

.circle .up { border-radius: 10rem 10rem 0 0; }
.circle .down { border-radius: 0 0 10rem 10rem; }
.circle .count { border-radius: 50%; }

.up {
  background: #4BC35F;
  height: 50%;
  margin-bottom: 0.25rem;  
}
.down {
  background: #C15044;
  height: 50%;  
}

.increment {
  flex: 1 0 0;
  text-align: center;
  opacity: .5;
  transition: 0.3s;
  cursor: pointer;
}
.increment:hover { 
  opacity : 1;
}

.count {
  position: absolute;
  top: 0;
  background: rgba(245,245,245,1.0);
  border-radius: 0.1rem;
  margin: 2.5rem;
  width: 5rem;
  font-size: 2.5rem;
  font-weight: bold;
  line-height: 5rem;
  text-align: center;
  box-shadow: 0 0 0 0.5rem rgba(245,245,245,1.0);
  pointer-events: none;
}

html, body { height: 100%; }

score 0 · Answer 1 · answered Jul 06 '15 at 17:19

0

Are you trying to make all the table cells the same height like this fiddle? https://jsfiddle.net/30way48v/2/

If so, add this to your css td{height: 100px;}

answered Jul 06 '15 at 17:19

Adam Buchanan Smith

9,422
5
19
39

Not quite. I'd like the opposite. I don't want the cell rows to be so fat. I'd like to scale the counter down a bit to make the row a bit thinner. Not too small where the counter is hard to make out, but just enough so the rows don't look ugly. But thanks for that tip though. I didn't know I could do that. – havok2063 Jul 06 '15 at 18:06
Do you want the up and down buttons to be smaller? – Adam Buchanan Smith Jul 06 '15 at 18:09
Yeah, and the numerical counter as well. When I resize the up and down buttons, the numerical counter div does not scale appropriately. I have to manually change its css properties, separately. I'd like the entire thing to be smaller, but still in proportion. Ideally, I'd like to change the width and height of vote, and have everything inside scale correctly. – havok2063 Jul 06 '15 at 18:14
I added another answer with a fiddle, but I think what you are asking is that you want the circle to scale to line height? If that is the case, it is not impossible but would require A TON of calculations and at that point it probably is not worth doing. – Adam Buchanan Smith Jul 06 '15 at 18:21

score 0 · Answer 2 · answered Jul 06 '15 at 18:19

OK, here its is with smaller <td>'s here is the fiddle https://jsfiddle.net/30way48v/3/

td{height: 50px;}
.vote {
  display: flex;
  flex-direction: column;
  position: relative;
  width: 5rem;
  height: 5rem;
  margin: 0px;

}

.circle .up { border-radius: 5rem 5rem 0 0; }
.circle .down { border-radius: 0 0 5rem 5rem; }
.circle .count { border-radius: 50%; }

.up {
  background: #4BC35F;
  height: 50%;
  margin-bottom: 0.25rem;  
}
.down {
  background: #C15044;
  height: 50%;  
}

.increment {
  flex: 1 0 0;
  text-align: center;
  opacity: .5;
  transition: 0.3s;
  cursor: pointer;
}
.increment:hover { 
  opacity : 1;
}

.count {
  position: absolute;
  top: 0;
  background: rgba(245,245,245,1.0);
  border-radius: 0.1rem;
  margin: 1.45rem;
  width: 2rem;
  font-size: 2.5rem;
  font-weight: bold;
  line-height: 2rem;
  text-align: center;
  box-shadow: 0 0 0 0.5rem rgba(245,245,245,1.0);
  pointer-events: none;

  &.upvoted { color: #4BC35F; }
  &.downvoted { color: #C15044; }
}

html, body { height: 100%; }

That's close to what I came up with. It has the same problem though as I have. If I change the .vote width and height to 2rem for example, the .count div does not change along with it. That's what I need. I'd like to scale the entire container up and down. — havok2063, Jul 06 '15 at 18:25

rescaling div inside a table cell

2 Answers2