I am currently facing a challenge in creating a stepping wizard form layout that features a bar at the top of the page. This bar displays a dynamic number of steps (nodes) and progress bars that connect these nodes. However, I am encountering difficulties in getting the progress bars and nodes to work harmoniously.
The main objective is to evenly space out each node horizontally on the page (which is working well with flexbox) and have the progress bars smoothly filling the gaps between the nodes.
At the moment, my approach involves using an <li> element to contain each pair of progress bar and <a> tags. Unfortunately, the layout is not aligning as desired, with the progress bars failing to fluidly fill the empty space between the <a> tags.
My question is: Is this the most effective way to structure this layout?
Before proceeding further, I want to ensure that this approach is optimal for achieving the desired layout.
EDIT 1 (Goal clarification):
I aim to replicate the layout shown in the image linked below:
https://i.sstatic.net/xB80I.png
In this image, both the progress bar and the red <a> node reside within the same <li>. Although I have set the progress bar to a width of 90% in the example, the ultimate goal is to assign a width solely to the red <a> node and have the progress bar seamlessly fill the remaining space.
Here is the HTML and SCSS code 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;
}
}
}
Do you think I am heading in the right direction with this setup?
Here is a snippet of the code 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>