Joe Joe - 4 months ago 14
Javascript Question

Align avatars vertically on a scoreboard using css and Jquery

I would like to vertically align avatar images on a score board using an unordered list, so they are always nicely put one under the other. The problem is that when the number that takes more space such as 100., the avatar gets pushed out of the place onto the right side. The problem grows if I want to put something in front of the first numbers, for example a medal icon or similar.

Is there a way to keep these aligned and responsive, using jquery/js or css? Here's my code and codepen link:

http://codepen.io/anon/pen/RRyama

html:

<div class="col-md-6 right__column">
<ul id="table" class="tableList">
<p class="tableHeader">Results</p>
<br>
<h5 class="tableHeader__name">Scoreboard</h5>
<hr class="line">
<li><span class="numbers">1.</span> <img src="https://placeholdit.imgix.net/~text?txtsize=6&txt=50%C3%9750&w=50&h=50" alt="kitten"><span class="name"> John Doe</span><span class="numbers__points pull-right">10 points</span> </li>
<hr class="line">
<li><span class="numbers">2.</span> <img src="https://placeholdit.imgix.net/~text?txtsize=6&txt=50%C3%9750&w=50&h=50" alt="kitten"><span class="name"> John Doe</span><span class="numbers__points pull-right">9 points</span> </li>
<hr class="line">
<li><span class="numbers">3.</span> <img src="https://placeholdit.imgix.net/~text?txtsize=6&txt=50%C3%9750&w=50&h=50" alt="kitten"><span class="name"> John Doe</span><span class="numbers__points pull-right">8 points</span> </li>
<hr class="line">
<li><span class="numbers">4.</span> <img src="https://placeholdit.imgix.net/~text?txtsize=6&txt=50%C3%9750&w=50&h=50" alt="kitten"><span class="name"> John Doe</span><span class="numbers__points pull-right">7 points</span> </li>
<hr class="line">
<li><span class="numbers">5.</span> <img src="https://placeholdit.imgix.net/~text?txtsize=6&txt=50%C3%9750&w=50&h=50" alt="kitten"><span class="name"> John Doe</span><span class="numbers__points pull-right">6 points</span> </li>
<hr class="line">
<li><span class="numbers">6.</span> <img src="https://placeholdit.imgix.net/~text?txtsize=6&txt=50%C3%9750&w=50&h=50" alt="kitten"><span class="name"> John Doe</span><span class="numbers__points pull-right">5 points</span> </li>
<hr class="line">
<li><span class="numbers">7.</span> <img src="https://placeholdit.imgix.net/~text?txtsize=6&txt=50%C3%9750&w=50&h=50" alt="kitten"><span class="name"> John Doe</span><span class="numbers__points pull-right">4 points</span> </li>
<hr class="line line__margin">
<li class="dots text-center"><span>&bull;&bull;&bull;</span></li>
<hr class="line line__margin--bottom">
<li><span class="numbers">20.</span> <img src="https://placeholdit.imgix.net/~text?txtsize=6&txt=50%C3%9750&w=50&h=50" alt="kitten"><span class="name"> John Doe</span><span class="numbers__points pull-right">3 points</span> </li>
</ul>
</div>
</div>


css:

.right__column {
background-color: grey;
padding: 0px;
padding-right: 36px;
}

.tableHeader {
font-size: 160%;
margin-top: 30px;
font-weight: 700;
letter-spacing: -1px;
color: white;
}

.tableHeader__name {
color: white;
font-size: 110%;
}

.name {
color: blue;
font-size: 120%;
}

.tableHeader__points {
color: white;
}

li {
list-style-type: none;
padding: 5px;
}

.dots {
font-size: 280%;
letter-spacing: 2px;
color: black;
//margin: -10%;
}

.line {
color: blue;
border-color: -moz-use-text-color -moz-use-text-color;
}

.line__margin {
margin-bottom: -3%;
}

.line__margin--bottom {
margin-top: -3%;
}

.numbers {
color: white;
font-size: 130%;
font-weight: bold;
}

.numbers__points {
color: white;
padding: 10px;
font-size: 130%;
font-weight: bold;
}

Answer

All you have to do is to set width to your .numbers like a 50px and make its display to inline-block. And then change the text-align to right. So even if the number is 9999 , it will fit exactly. Increasing the width can adjust the visibility of the numbers

.numbers {
    color: white;
    font-size: 130%;
    font-weight: bold;
    width: 50px;
    text-align: right;
    display: inline-block;
}
Comments