JosephA91 JosephA91 - 2 months ago 9
CSS Question

Layout progress bars in-between nodes - HTML & CSS

I'm trying to build a stepping wizard form layout with a bar at the top of the page containing a dynamic number of steps (nodes) and progress bars connecting the nodes. I'm having trouble getting the progress bars and nodes to cooperate.

The idea is to have each nodes spaced evenly on the page horizontally (already working nicely using flexbox), and the progress bars fluidly filling the gaps between the nodes.

I am currently trying to use an

<li>
to contain each iteration of the progress bar &
<a>
pairs, but it is not laying out like I need it to (the progress bars are not behaving fluidly and not filling empty space between the
<a>
tags).

Is this the best way to lay this out?

Just though I'd confirm this is the best way to lay these out before going any further.

EDIT 1 (Clarifying goal):

This image is an example of what I am trying to achieve.

enter image description here

The progress bar and red
<a>
node are both within the same
<li>
. I have given the progress bar a width of 90% for this example but the goal is to only assign a width to the red
<a>
node and have the project bar fluidly fill the remaining space.

Below is the HTML & SCSS I am currently using:

<div class="panel panel-default">
<div class="panel-heading">
<div class="panel-title">Project Milestones</div>
</div>
<div class="panel-body">
<ul class="milestone-bar">
<li>
<div class="progress project-progress">
<div class="progress-bar" role="progressbar" aria-valuenow="100.0" aria-valuemin="0" aria-valuemax="100" style="width: 100.0%;">
100%
</div>
</div>
<a href="/projects/24?milestone=18">Milestone 1</a>
</li>

<li>
<div class="progress project-progress">
<div class="progress-bar" role="progressbar" aria-valuenow="100.0" aria-valuemin="0" aria-valuemax="100" style="width: 100.0%;">
100%
</div>
</div>
<a href="/projects/24?milestone=39">Milestone 3</a>
</li>

<li>
<div class="progress project-progress">
<div class="progress-bar" role="progressbar" aria-valuenow="50.0" aria-valuemin="0" aria-valuemax="100" style="width: 50.0%;">
50%
</div>
</div>
<a href="/projects/24?milestone=48">Milestone 2</a>
</li>
</ul>
</div>
</div>


ul.milestone-bar {
padding: 0;
margin: 0 0 15px 0;
display: flex;
li {
width: 100%;
list-style: none;
display: inline-block;;
a {
width: 30px;
height: 30px;
font-size: 12px;
border-radius: 15px;
background-color: red;
float:right;
&:hover {
background: none;
border: 4px solid blue;
}
&:active {
background-color: darkblue;
}
&:focus {
background-color: green;
}
}
.project-progress {
background-color: #d3d3d3;
display: inline-block;
margin: 0;
}
}
}


Is this on the right track?

Below is a snippet of the above:



ul.milestone-bar {
padding: 0;
margin: 0 0 15px 0;
display: flex;
}
ul.milestone-bar li {
width: 100%;
list-style: none;
display: inline-block;
}
ul.milestone-bar li a {
width: 30px;
height: 30px;
font-size: 12px;
border-radius: 15px;
background-color: red;
float: right;
}
ul.milestone-bar li a:hover {
background: none;
border: 4px solid blue;
}
ul.milestone-bar li a:active {
background-color: darkblue;
}
ul.milestone-bar li a:focus {
background-color: green;
}
ul.milestone-bar li .project-progress {
background-color: #d3d3d3;
display: inline-block;
margin: 0;
}

<div class="panel panel-default">
<div class="panel-heading">
<div class="panel-title">Project Milestones</div>
</div>
<div class="panel-body">
<ul class="milestone-bar">
<li>
<div class="progress project-progress">
<div class="progress-bar" role="progressbar" aria-valuenow="100.0" aria-valuemin="0" aria-valuemax="100" style="width: 100.0%;">
100%
</div>
</div>
<a href="/projects/24?milestone=18">Milestone 1</a>
</li>

<li>
<div class="progress project-progress">
<div class="progress-bar" role="progressbar" aria-valuenow="100.0" aria-valuemin="0" aria-valuemax="100" style="width: 100.0%;">
100%
</div>
</div>
<a href="/projects/24?milestone=39">Milestone 3</a>
</li>

<li>
<div class="progress project-progress">
<div class="progress-bar" role="progressbar" aria-valuenow="50.0" aria-valuemin="0" aria-valuemax="100" style="width: 50.0%;">
50%
</div>
</div>
<a href="/projects/24?milestone=48">Milestone 2</a>
</li>
</ul>
</div>
</div>




Answer

So I did some changes to your code:

  1. Added flex to each li to create nested flex children here:

    ul.milestone-bar li {
      width: 100%;
      list-style: none;
      display: flex;
    }
    
  2. Added flex: 1 for it to flex to the whole width and vertically align it to the center using align-self: center to your project-progress like this:

    ul.milestone-bar li .project-progress {
      background-color: #d3d3d3;
      display: inline-block;
      margin: 0;
      flex: 1;
      align-self: center
    }
    
  3. Added the progress bar style:

     ul.milestone-bar li .project-progress .progress-bar {
        background: #0095FF;
        text-align: center;
     }
    
  4. Also adjusted the milestone-bar to look better:

    ul.milestone-bar li a {
      width: 60px;
      height: 60px;
      font-size: 10px;
      border-radius: 50%;
      background-color: red;
      text-align: center;
      line-height: 60px;
    }
    ul.milestone-bar li a:hover {
      background: none;
      border: 4px solid blue;
      line-height: 52px;
    }
    
  5. To top it up, used box-sizing: border-box to all elements in the page for better management of border especially to remove the 'jumps' when you hover.

* {
  box-sizing: border-box;
}
ul.milestone-bar {
  padding: 0;
  margin: 0 0 15px 0;
  display: flex;
}
ul.milestone-bar li {
  width: 100%;
  list-style: none;
  display: flex;
}
ul.milestone-bar li a {
  width: 60px;
  height: 60px;
  font-size: 10px;
  border-radius: 50%;
  background-color: red;
  text-align: center;
  line-height: 60px;
}
ul.milestone-bar li a:hover {
  background: none;
  border: 4px solid blue;
  line-height: 52px;
}
ul.milestone-bar li a:active {
  background-color: darkblue;
}
ul.milestone-bar li a:focus {
  background-color: green;
}
ul.milestone-bar li .project-progress {
  background-color: #d3d3d3;
  display: inline-block;
  margin: 0;
  flex: 1;
  align-self: center
}
ul.milestone-bar li .project-progress .progress-bar {
    background: #0095FF;
    text-align: center;
}
<div class="panel panel-default">
  <div class="panel-heading">
    <div class="panel-title">Project Milestones</div>
  </div>
  <div class="panel-body">
    <ul class="milestone-bar">
      <li>
        <div class="progress project-progress">
          <div class="progress-bar" role="progressbar" aria-valuenow="100.0" aria-valuemin="0" aria-valuemax="100" style="width: 100.0%;">
            100%
          </div>
        </div>
        <a href="/projects/24?milestone=18">Milestone 1</a>
      </li>

      <li>
        <div class="progress project-progress">
          <div class="progress-bar" role="progressbar" aria-valuenow="100.0" aria-valuemin="0" aria-valuemax="100" style="width: 100.0%;">
            100%
          </div>
        </div>
        <a href="/projects/24?milestone=39">Milestone 3</a>
      </li>

      <li>
        <div class="progress project-progress">
          <div class="progress-bar" role="progressbar" aria-valuenow="50.0" aria-valuemin="0" aria-valuemax="100" style="width: 50.0%;">
            50%
          </div>
        </div>
        <a href="/projects/24?milestone=48">Milestone 2</a>
      </li>
    </ul>
  </div>
</div>

Let me know your feedback on this. Thanks!

Comments