CODEWITHSUNDEEP
html
Paul Taylor
Paul Taylor

Reputation: 13120

How do I vertically align these Html 5 progress bars?

I have a series of progress bars each with name, I want them to be vertically aligned so that the progress bar starts at the same place on each line. I could use tables to do this, but what is the preferred way to do this.

<div><label for="pb0">Processing</label><progress id="pb0" value="0" max="200"></progress><br>
        <label for="pb1">Songs loaded</label><progress id="pb1" value="0" max="200"></progress><br>
        <label for="pb3">Songs ignored because already matched</label><progress id="pb3" value="0" max="200"></progress><br>
        <label for="pb13">Songs updated from Naim metadata </label><progress id="pb13" value="0" max="200"></progress><br>
        <label for="pb4">Songs matched to MusicBrainz release</label><progress id="pb4" value="0" max="200"></progress><br>
        <label for="pb5">Songs matched to MusicBrainz song only</label><progress id="pb5" value="0" max="200"></progress><br>
        <label for="pb14">Songs matched to Acoustid song only</label><progress id="pb14" value="0" max="200"></progress><br>
        <label for="pb7">Songs matched with artwork</label><progress id="pb7" value="0" max="200"></progress><br>
        <label for="pb17">Songs matched to AcousticBrainz</label><progress id="pb17" value="0" max="200"></progress><br>
        <label for="pb8">Songs saved (if not preview)</label><progress id="pb8" value="0" max="200"></progress><br>
        <label for="pb11">Completed</label><progress id="pb11" value="0" max="200"></progress><br>
        <label for="pb12">Errors</label><progress id="pb12" value="0" max="200"></progress><br>
        </div>

Upvotes: 0

Views: 89

Answers (4)

KL_
KL_

Reputation: 1513

Use float:right, and margin-right to align with the position you want.

progress{
  float: right;
  margin-right: 50px;
}
<div>
<label for="pb0">Processing</label><progress id="pb0" value="0" max="200"></progress><br>
    <label for="pb1">Songs loaded</label><progress id="pb1" value="0" max="200"></progress><br>
    <label for="pb3">Songs ignored because already matched</label><progress id="pb3" value="0" max="200"></progress><br>
    <label for="pb13">Songs updated from Naim metadata </label><progress id="pb13" value="0" max="200"></progress><br>
    ...
</div>

Or, you can work with your label:

label{
  width: 100px;
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
<div>
<label for="pb0">Processing</label><progress id="pb0" value="0" max="200"></progress><br>
    <label for="pb1">Songs loaded</label><progress id="pb1" value="0" max="200"></progress><br>
    <label for="pb3">Songs ignored because already matched</label><progress id="pb3" value="0" max="200"></progress><br>
    <label for="pb13">Songs updated from Naim metadata </label><progress id="pb13" value="0" max="200"></progress><br>
    ...
</div>

And, without cutting the text (just set one min-width for your label):

label{
  width: 200px;
  display: inline-block;
}
<div>
<label for="pb0">Processing</label><progress id="pb0" value="0" max="200"></progress><br>
    <label for="pb1">Songs loaded</label><progress id="pb1" value="0" max="200"></progress><br>
    <label for="pb3">Songs ignored because already matched</label><progress id="pb3" value="0" max="200"></progress><br>
    <label for="pb13">Songs updated from Naim metadata </label><progress id="pb13" value="0" max="200"></progress><br>
    ...
</div>

Or, you can use display: flex:

div{
  display: flex;
  width: 100%;
}

label, progress{
  flex: 1;
}
<div>
  <label for="pb0">Processing</label><progress id="pb0" value="0" max="200"></progress>
</div>
<div>
  <label for="pb1">Songs loaded</label><progress id="pb1" value="0" max="200"></progress>
</div>
<div>
  <label for="pb3">Songs ignored because already matched</label><progress id="pb3" value="0" max="200"></progress>
</div>
<div>
  <label for="pb13">Songs updated from Naim metadata </label><progress id="pb13" value="0" max="200"></progress>
</div>
    ...

Upvotes: 2

Elvin Mammadov
Elvin Mammadov

Reputation: 1120

Just add one rule css,

progress { float: right;}

Upvotes: 0

Aiyaz Khorajia
Aiyaz Khorajia

Reputation: 598

You can assign width to label based on your need. 

label{
  width:50%;
  display:inline-block;
}
<div><label for="pb0">Processing</label><progress id="pb0" value="0" max="200"></progress><br>
        <label for="pb1">Songs loaded</label><progress id="pb1" value="0" max="200"></progress><br>
        <label for="pb3">Songs ignored because already matched</label><progress id="pb3" value="0" max="200"></progress><br>
        <label for="pb13">Songs updated from Naim metadata </label><progress id="pb13" value="0" max="200"></progress><br>
        <label for="pb4">Songs matched to MusicBrainz release</label><progress id="pb4" value="0" max="200"></progress><br>
        <label for="pb5">Songs matched to MusicBrainz song only</label><progress id="pb5" value="0" max="200"></progress><br>
        <label for="pb14">Songs matched to Acoustid song only</label><progress id="pb14" value="0" max="200"></progress><br>
        <label for="pb7">Songs matched with artwork</label><progress id="pb7" value="0" max="200"></progress><br>
        <label for="pb17">Songs matched to AcousticBrainz</label><progress id="pb17" value="0" max="200"></progress><br>
        <label for="pb8">Songs saved (if not preview)</label><progress id="pb8" value="0" max="200"></progress><br>
        <label for="pb11">Completed</label><progress id="pb11" value="0" max="200"></progress><br>
        <label for="pb12">Errors</label><progress id="pb12" value="0" max="200"></progress><br>
        </div>

Upvotes: 0

Sridhar Rajan
Sridhar Rajan

Reputation: 105

You can rotate it:

Webkit: -webkit-transform: rotate(90deg);

FireFox: -moz-transform: rotate(90deg);

IE: filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);

Upvotes: 0

Related Questions