The [First] step in the progress bar is not aligning with step [Two, Three, and Four]. See picture below:
There is a couple pixel space between the top of steps 2,3, and 4 and I am not sure how to fix? The code works perfectly in the insert, but on my webpage it is not working. Perhaps there is css overlap? I even changed the div classes to something very unique and it wasn't fixing it.
I put a red line on top of the progress bar to emphasize the small space error. In sum, the circle for the first step is a couple pixels higher than the rest... I need to figure out a way to fix this.
My code is below:
.containerpb {
width: 100%;
margin: 50px auto;
}
.progressbar {
counter-reset: step;
border-top: 1px solid red;
}
.progressbar li {
list-style-type: none;
width: 25%;
float: left;
font-size: 12px;
position: relative;
text-align: center;
text-transform: uppercase;
color: #7d7d7d;
}
.progressbar li:before {
width: 30px;
height: 30px;
content: counter(step);
counter-increment: step;
line-height: 30px;
border: 2px solid #7d7d7d;
display: block;
text-align: center;
margin: 0 auto 10px auto;
border-radius: 50%;
background-color: white;
}
.progressbar li:after {
width: 100%;
height: 2px;
content: '';
position: absolute;
background-color: #7d7d7d;
top: 15px;
left: -50%;
z-index: -1;
}
.progressbar li:first-child:after {
content: none;
}
.progressbar li.active {
color: green;
}
.progressbar li.active:before {
border-color: #55b776;
}
.progressbar li.active + li:after {
background-color: #55b776;
}
<div class="containerpb">
<ul class="progressbar">
<li class="active">Complete Basic Information</li>
<li>Add Secondary Owner(s)</li>
<li>Review</li>
<li>Export</li>
</ul>
</div>
Got it! Thanks for everyone's help. It was a margin-top id for the li+li content. Had to change it from .25em to 0. Thanks!
Related
I have a progress bar that I want to extend to 100% full width, like the image below, being that it extends its parent width:
But its positioned like this in the center:
I understand that the list items are aligned center, however I am hitting issues trying to fix it myself.
I thought I could align left first circle and the last circle to the right, but then the second and third step circles aren't justified horizontally and the green line of the tracker bar does not align properly between each step circle, which ends up with the green line becoming shorter.
The progress tracker should span the entire width of the red border for guide purposes. The first step circle should align to the left and the last should align to the right.
Any ideas will be much appreciated.
.container {
width: 100%;
}
.progressbar {
counter-reset: step;
margin: 0;
border-top: 1px solid red;
}
.progressbar li {
list-style: none;
float: left;
position: relative;
text-align: center;
width: 20%;
}
.progressbar li::before {
content: counter(step);
counter-increment: step;
width: 30px;
height: 30px;
line-height: 30px;
border: 1px solid #ddd;
background-color: white;
display: block;
text-align: center;
margin: 0 auto 10px auto;
border-radius: 50%;
}
.progressbar li::after {
content: '';
position: absolute;
width: 100%;
height: 1px;
background-color: #ddd;
top: 16px;
left: -50%;
right: 0;
z-index: -1;
}
.progressbar li:nth-child(1)::after {
content: none;
}
.progressbar li.active {
color: green;
}
.progressbar li.active::before {
border-color: green;
}
.progressbar li.active+li::after {
background-color: green;
}
<div class="container">
<ul class="progressbar">
<li class="">Step 1</li>
<li class="active">Step 2</li>
<li class="">Step 3</li>
<li class="">Step 4</li>
</ul>
</div>
Here's what I did to your code - there are quite a few changes, so bear with me:
reset the ul padding to zero,
the main change is that the :after in the same li will be the line after the step and not using the :after of the following li (added right: 0 and left: 0 to .progressbar li::after so that it fills the parent li)
make progressbar a flexbox and add flex: 1 to the li (so that each li shares the horizontal width) - this lines up all the lis in a line (note that I have removed the float and width too),
now make the lis a column flexbox with align-items: flex-start - we are almost done except the last step.
add flex-grow: 0 to the last li along with align-self: flex-end and white-space: nowrap (to push it to the right)
See demo below:
.container {
width: 100%;
}
.progressbar {
counter-reset: step;
margin: 0;
border-top: 1px solid red;
display: flex;
padding: 0;
}
.progressbar li {
list-style: none;
flex: 1;
position: relative;
text-align: center;
display: flex;
flex-direction: column;
align-items: flex-start;
}
.progressbar li::before {
content: counter(step);
counter-increment: step;
width: 30px;
height: 30px;
line-height: 30px;
border: 1px solid #ddd;
background-color: white;
display: block;
text-align: center;
border-radius: 50%;
}
.progressbar li::after {
content: '';
position: absolute;
width: 100%;
height: 1px;
background-color: #ddd;
top: 16px;
left: 0;
right: 0;
z-index: -1;
}
.progressbar li:last-child {
flex-grow: 0;
align-items: flex-end;
white-space: nowrap;
}
.progressbar li.active {
color: green;
}
.progressbar li.active::before {
border-color: green;
}
.progressbar li.active::after {
background-color: green;
}
/* fixes the right-most line when penultimate step is active */
.progressbar li:nth-last-child(2).active + li:after {
background-color: green;
}
<div class="container">
<ul class="progressbar">
<li class="">Step 1</li>
<li class="active">Step 2</li>
<li class="">Step 3</li>
<li class="">Step 4</li>
</ul>
</div>
Is this a possible solution for you?
.container {
width: 100%;
overflow: hidden; /* EDIT: hide .progressbar negative margins */
}
.progressbar {
counter-reset: step;
margin: 0 -12.5% 0 -12.5%; /* EDIT: set negative margins */
padding: 0; /* EDIT: remove all paddings */
border-top: 1px solid red;
}
.progressbar li {
list-style: none;
float: left;
position: relative;
text-align: center;
width: 25%; /* EDIT: set 1/4 width of .progressbar */
}
.progressbar li::before {
content: counter(step);
counter-increment: step;
width: 30px;
height: 30px;
line-height: 30px;
border: 1px solid #ddd;
background-color: white;
display: block;
text-align: center;
margin: 0 auto 10px auto;
border-radius: 50%;
}
.progressbar li::after {
content: '';
position: absolute;
width: 100%;
height: 1px;
background-color: #ddd;
top: 16px;
left: -50%;
right: 0;
z-index: -1;
}
.progressbar li:nth-child(1)::after {
content: none;
}
.progressbar li.active {
color: green;
}
.progressbar li.active::before {
border-color: green;
}
.progressbar li.active+li::after {
background-color: green;
}
<div class="container">
<ul class="progressbar">
<li class="">Step 1</li>
<li class="active">Step 2</li>
<li class="">Step 3</li>
<li class="">Step 4</li>
</ul>
</div>
I'm confused about a progress bar that I have created.
I want the progress bar to change its background color to blue after setting the class to “active”. But I want the progress bar to change its background color before the class is set to “active”.
Here is my HTML:
<ul class="progressBar">
<li class="active">Beong Processed</li>
<li class="active">Waiting for payment</li>
<li>Paid</li>
</ul>
…and CSS:
.progressBar li.active {
color: dodgerblue;
}
.progressBar li.active:before {
border-color: dodgerblue;
background-color: dodgerblue
}
.progressBar li.active + li:after {
background-color: dodgerblue;
}
The result is this
I want it to be like this
https://jsfiddle.net/dedi_wibisono17/c69e374r/2/
Use .progressBar .active:after
instead of .progressBar li.active + li:after
+ in css
It is Adjacent sibling combinator. It combines two sequences of simple
selectors having the same parent and the second one must come
IMMEDIATELY after the first.
.wrapper-progressBar {
width: 100%
}
.progressBar {
}
.progressBar li {
list-style-type: none;
float: left;
width: 33%;
position: relative;
text-align: center;
}
.progressBar li:before {
content: " ";
line-height: 30px;
border-radius: 50%;
width: 30px;
height: 30px;
border: 1px solid #ddd;
display: block;
text-align: center;
margin: 0 auto 10px;
background-color: white
}
.progressBar li:after {
content: "";
position: absolute;
width: 100%;
height: 4px;
background-color: #ddd;
top: 15px;
left: -50%;
z-index: -1;
}
.progressBar li:first-child:after {
content: none;
}
.progressBar li.active {
color: dodgerblue;
}
.progressBar li.active:before {
border-color: dodgerblue;
background-color: dodgerblue
}
.progressBar .active:after {
background-color: dodgerblue;
}
<div class="row">
<div class="col-xs-12 col-md-8 offset-md-2 block border">
<div class="wrapper-progressBar">
<ul class="progressBar">
<li class="active">Beong Processed</li>
<li class="active">Waiting for payment</li>
<li>Paid</li>
</ul>
</div>
</div>
</div>
According to what you requested, this is more like the answer you asked for?
.wrapper-progressBar {
width: 100%
}
.progressBar {
}
.progressBar li {
list-style-type: none;
float: left;
width: 33%;
position: relative;
text-align: center;
}
.progressBar li:before {
content: " ";
line-height: 30px;
border-radius: 50%;
width: 17px;
height: 17px;
border: 1px solid #ddd;
border-left:none;
display: block;
text-align: center;
margin: 8.5px auto 0px;
background-color: #eee;
}
.progressBar li:after {
content: "";
position: absolute;
width: 97%;
height: 5px;
background-color: #eee;
border: 1px solid #ddd;
border-right:none;
top: 15px;
left: -50%;
z-index: -1;
}
.progressBar li:first-child:after {
content: none;
}
.progressBar li.active {
color: dodgerblue;
}
.progressBar li.active:before {
border-color: dodgerblue;
background-color: dodgerblue
}
.progressBar .active:after {
background-color: dodgerblue;
}
<div class="row">
<div class="col-xs-12 col-md-8 offset-md-2 block border">
<div class="wrapper-progressBar">
<ul class="progressBar">
<li class="active">Beong Processed</li>
<li class="active">Waiting for payment</li>
<li>Paid</li>
</ul>
</div>
</div>
</div>
Try changing your .progressBar li.active + li:after selector to .progressBar li.active:after
.wrapper-progressBar {
width: 100%
}
.progressBar {
}
.progressBar li {
list-style-type: none;
float: left;
width: 33%;
position: relative;
text-align: center;
}
.progressBar li:before {
content: " ";
line-height: 30px;
border-radius: 50%;
width: 30px;
height: 30px;
border: 1px solid #ddd;
display: block;
text-align: center;
margin: 0 auto 10px;
background-color: white
}
.progressBar li:after {
content: "";
position: absolute;
width: 100%;
height: 2px;
background-color: #ddd;
top: 15px;
left: -50%;
z-index: -1;
}
.progressBar li:first-child:after {
content: none;
}
.progressBar li.active {
color: dodgerblue;
}
.progressBar li.active:before {
border-color: dodgerblue;
background-color: dodgerblue
}
.progressBar li.active:after {
background-color: dodgerblue;
}
<div class="row">
<div class="col-xs-12 col-md-8 offset-md-2 block border">
<div class="wrapper-progressBar">
<ul class="progressBar">
<li class="active">Beong Processed</li>
<li class="active">Waiting for payment</li>
<li>Paid</li>
</ul>
</div>
</div>
</div>
We have used a pure css base progress bar.
The main css part is as below.
.container {
width: 600px;
margin: 20px auto;
}
.progressbar {
margin: 0;
padding: 0;
counter-reset: step;
}
.progressbar li {
list-style-type: none;
width: 25%;
float: left;
font-size: 12px;
position: relative;
text-align: center;
text-transform: uppercase;
color: #7d7d7d;
}
.progressbar li:before {
width: 30px;
height: 30px;
content: counter(step);
counter-increment: step;
line-height: 30px;
border: 2px solid #7d7d7d;
display: block;
text-align: center;
margin: 0 auto 10px auto;
border-radius: 50%;
background-color: white;
}
.progressbar li:after {
width: 100%;
height: 2px;
content: '';
position: absolute;
background-color: #7d7d7d;
top: 15px;
left: -50%;
z-index: -1;
}
...............
The html
<div class="container">
<ul class="progressbar">
<li class="active">login</li>
<li>choose interest</li>
........
Complete sample could be found at https://jsfiddle.net/wbj7e79p/.
As you can see it mess up for seven step. The reason is .progressbar li width which is fixed to 25% we wanted to make it dynamic base on number of steps.
So we tried width : calc (100% / steps) or calc (100% / counter(steps)) but none of them worked. Any idea !
Please consider that we are building a component which build a progress bar on the fly, so we can not find the actual number of steps
Did you consider flexbox?
body {
font-family: 'Alegreya Sans', sans-serif;
margin: 0;
padding: 0;
}
.container {
margin: 20px auto;
}
.progressbar {
margin: 0;
padding: 0;
counter-reset: step;
display: flex;
}
.progressbar li {
list-style-type: none;
flex: 1;
font-size: 12px;
position: relative;
text-align: center;
text-transform: uppercase;
color: #7d7d7d;
}
.progressbar li:before {
width: 30px;
height: 30px;
content: counter(step);
counter-increment: step;
line-height: 30px;
border: 2px solid #7d7d7d;
display: block;
text-align: center;
margin: 0 auto 10px auto;
border-radius: 50%;
background-color: white;
}
.progressbar li:after {
width: 100%;
height: 2px;
content: '';
position: absolute;
background-color: #7d7d7d;
top: 15px;
left: -50%;
z-index: -1;
}
.progressbar li:first-child:after {
content: none;
}
.progressbar li.active {
color: green;
}
.progressbar li.active:before {
border-color: #55b776;
}
.progressbar li.active + li:after {
background-color: #55b776;
}
<h1>Four Steps</h1>
<div class="container">
<ul class="progressbar">
<li class="active">login</li>
<li>choose interest</li>
<li>add friends</li>
<li>View map</li>
</ul>
</div>
<h1> Seven Steps</h1>
<div class="container">
<ul class="progressbar">
<li class="active">login</li>
<li>choose interest</li>
<li>add friends</li>
<li>remove</li>
<li>fix users</li>
<li>review</li>
<li>save all</li>
</ul>
</div>
I'm going to create a timeline component and I have the following template
<ul *ngIf="alerts!=undefined" class="timeline">
<li *ngFor="let alert of alerts; let i=index" [class.timeline-inverted]="i % 2 == 1">
<div class="timeline-badge">
<span>{{alert.type}}</span>
</div>
<div class="timeline-panel">
<div class="timeline-body">
<p>{{alert.id}}</p>
</div>
<div class="timeline-footer">
<p class="">{{alert.date}}</p>
</div>
</div>
</li>
</ul>
The corresponding .scss file is like
.timeline {
list-style: none;
padding: 10px 0;
position: relative;
font-weight: 300;
border-style: solid;
border-width: medium;
}
.timeline:before {
top: 0;
bottom: 0;
position: absolute;
content:" ";
width: 6px;
background: $magenta;
left: 50%;
margin-left: -3px;
}
.timeline > li {
margin-bottom: 40px;
position: relative;
width: 50%;
float: left;
clear: left;
}
.timeline > li:before, .timeline > li:after {
content:" ";
display: table;
}
.timeline > li:after {
clear: both;
}
.timeline > li > .timeline-panel {
width: calc(100% - 35px);
width: -moz-calc(100% - 35px);
width: -webkit-calc(100% - 35px);
float: left;
border-radius: 5px;
background: $white;
position: relative;
}
.timeline > li > .timeline-panel:before {
position: absolute;
top: 26px;
right: -15px;
display: inline-block;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
content:" ";
}
.timeline > li > .timeline-panel:after {
position: absolute;
top: 27px;
right: -14px;
display: inline-block;
border-top: 14px solid transparent;
border-left: 14px solid $white;
border-right: 0 solid $white;
border-bottom: 14px solid transparent;
content:" ";
}
The <ul> tag is not filled by those <li> tag created by *ngFor which makes the "line" of the timeline disappear.
The black border is the border of the <ul> tag, which is suppose to wrap all <li> tags below it and have the magenta line go through all bubbles.
You problem is in CSS
when you use float on li, it actually remove it from the document flow.
By using Overflow:hidden, it will somehow fix this issue.
you can read this answer
Your problem is not with CSS, is it with angular structural directives.
Please read this article,
https://angular.io/guide/structural-directives#group-sibling-elements-with-ng-container
I believe, you will find solution there.
In this fiddle I create a simple breadcrumb. I like to change the dependencies of class "div.arrow-right". I like to control the arrow size by "#sequence". So that the size of the arrow belongs to the font-size. That means if I change the font-size the right-arrow should fit automatically the same high as the div which contains the writing.
#sequence {
font-size: 28px;
}
And I like to add a gap or lets say a white thin arrow between two breadcrumb elements, see the picture below.
An alternate using :before and :after pseudo elements. Fiddle
.breadcrumb {
list-style: none;
overflow: hidden;
font-size: 28px;
}
.breadcrumb li {
color: white;
text-decoration: none;
padding: 8px 0 8px 50px;
position: relative;
display: block;
float: left;
cursor: pointer;
}
.breadcrumb li:after {
content: "";
display: block;
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 30px solid #74c476;
position: absolute;
top: 50%;
margin-top: -50px;
left: 100%;
z-index: 2;
}
.breadcrumb li:before {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 30px solid white;
position: absolute;
top: 50%;
margin-top: -50px;
margin-left: 2px;
left: 100%;
z-index: 1;
}
li:nth-child(1) {
padding-left: 20px;
background-color: #74c476;
}
li:nth-child(2) {
background-color: #61a362;
}
li:nth-child(3) {
background-color: #518851;
}
li:nth-child(1):after {
border-left-color: #74c476;
}
li:nth-child(2):after {
border-left-color: #61a362;
}
li:nth-child(3):after {
border-left-color: #518851;
}
<ul class="breadcrumb">
<li>hello</li>
<li>operator</li>
<li>layout</li>
</ul>