I am trying to show the progress bar.
I have uploaded the file here - https://jsfiddle.net/iftekhar09/7ojsz5qp/1/
Also there's a snippet below.
I want to put the Image (say from font-awesome) in place of the number "1", how can I achieve this?
.container {
width: auto;
}
.task-progress-header{
font-family: "Open Sans", "Helvetica Neue", sans-serif;
font-size: 16px;
padding: 15px;
margin-left: 20px;
}
a {
text-decoration: none;
display: block;
}
.progressbar li img{
width: 15px;
}
.progressbar {
counter-reset: step;
}
.progressbar li {
list-style-type: none;
width: 14%;
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="task-progress-header">Your Progress</div>
<div class="container">
<ul class="progressbar">
<!-- <li><img src="../../../assets/calendar.svg"><br></li>-->
<li class="active">Create Event</li>
<li class="active">Setup Exhibitors</li>
<li class="active">Setup Sponsors</li>
<li>Add participants</li>
<li>Setup Questions</li>
<li>Done</li>
</ul>
</div>
Use content:'' background:url inside .progressbar li:before class and give the image URL it works.
I hope this is what you are expecting
For different images at each step:
.container {
width: auto;
}
.task-progress-header {
font-family: "Open Sans", "Helvetica Neue", sans-serif;
font-size: 16px;
padding: 15px;
margin-left: 20px;
}
a {
text-decoration: none;
display: block;
}
.progressbar li img {
width: 15px;
}
.progressbar li {
list-style-type: none;
width: 14%;
float: left;
font-size: 12px;
position: relative;
text-align: center;
text-transform: uppercase;
color: #7d7d7d;
}
.progressbar li:nth-child(1):before {
background: url(https://dummyimage.com/30x0/c0c/fff);
}
.progressbar li:nth-child(2):before {
background: url(https://dummyimage.com/30x0/00c/fff);
}
.progressbar li:nth-child(3):before {
background: url(https://dummyimage.com/30x0/c0/fff);
}
.progressbar li:nth-child(4):before {
background: url(https://dummyimage.com/30x0/0fc/fff);
}
.progressbar li:nth-child(5):before {
background: url(https://dummyimage.com/30x0/f0c/fff);
}
.progressbar li:nth-child(6):before {
background: url(https://dummyimage.com/30x0/002/fff);
}
.progressbar li:before {
width: 30px;
height: 30px;
content: '';
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="task-progress-header">Your Progress</div>
<div class="container">
<ul class="progressbar">
<!-- <li><img src="../../../assets/calendar.svg"><br></li>-->
<li class="active">
Create Event</li>
<li class="active">Setup Exhibitors</li>
<li class="active">Setup Sponsors</li>
<li>Add participants</li>
<li>Setup Questions</li>
<li>Done</li>
</ul>
</div>
Same image at each step:
.container {
width: auto;
}
.task-progress-header {
font-family: "Open Sans", "Helvetica Neue", sans-serif;
font-size: 16px;
padding: 15px;
margin-left: 20px;
}
a {
text-decoration: none;
display: block;
}
.progressbar li img {
width: 15px;
}
.progressbar li {
list-style-type: none;
width: 14%;
float: left;
font-size: 12px;
position: relative;
text-align: center;
text-transform: uppercase;
color: #7d7d7d;
}
.progressbar li:before {
background: url(https://dummyimage.com/30x0/002/fff);
}
.progressbar li:before {
width: 30px;
height: 30px;
content: '';
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="task-progress-header">Your Progress</div>
<div class="container">
<ul class="progressbar">
<!-- <li><img src="../../../assets/calendar.svg"><br></li>-->
<li class="active">
Create Event</li>
<li class="active">Setup Exhibitors</li>
<li class="active">Setup Sponsors</li>
<li>Add participants</li>
<li>Setup Questions</li>
<li>Done</li>
</ul>
</div>
I made my own progress step bar.
Maybe this will come to use for someone.
In this progress step bar every step has its own image.
.bs-wizard {margin-top: 20px;}
.bs-wizard {border-bottom: solid 1px #e0e0e0; padding: 0 0 10px 0;}
.bs-wizard > .bs-wizard-step {padding: 0; position: relative; width: 16.5% !important;}
.stepvijf > .bs-wizard-step {padding: 0; position: relative; width: 20% !important;}
.bs-wizard > .bs-wizard-step + .bs-wizard-step {}
.bs-wizard > .bs-wizard-step .bs-wizard-stepnum {color: #333; font-size: 16px; margin-bottom: 5px;}
.bs-wizard > .bs-wizard-step > .bs-wizard-dot {position: absolute; width: 30px; height: 30px; display: block; background: #84b826; top: 45px; left: 50%; margin-top: -15px; margin-left: -15px; border-radius: 50%;}
.bs-wizard > .bs-wizard-step > .progress {position: relative; border-radius: 0px; height: 8px; box-shadow: none; margin: 20px 0; border-bottom: 1px solid; border-top: 1px solid;}
.bs-wizard > .bs-wizard-step > .progress > .progress-bar {width:0px; box-shadow: none; background: #84b826;}
.bs-wizard > .bs-wizard-step.complete > .progress > .progress-bar {width:100%;}
.bs-wizard > .bs-wizard-step.active > .progress > .progress-bar {width:50%;}
.bs-wizard > .bs-wizard-step:first-child.active > .progress > .progress-bar {width:0%;}
.bs-wizard > .bs-wizard-step:last-child.active > .progress > .progress-bar {width: 100%;}
.bs-wizard > .bs-wizard-step.disabled > .bs-wizard-dot {background-color: #f5f7f8;}
.bs-wizard > .bs-wizard-step.disabled > .bs-wizard-dot:after {opacity: 0;}
.bs-wizard > .bs-wizard-step:first-child > .progress {left: 50%; width: 50%;}
.bs-wizard > .bs-wizard-step:last-child > .progress {width: 50%;}
.bs-wizard > .bs-wizard-step.disabled a.bs-wizard-dot{ pointer-events: none; }
#media all and (max-width: 1550px) {
.bs-wizard > .bs-wizard-step .bs-wizard-info {color: #333; font-size: 10px !important;}
}
#media all and (min-width:1550px) {
.bs-wizard > .bs-wizard-step .bs-wizard-info {color: #333; font-size: 14px;}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<div class="container" style="width: 105%; padding-right: 60px;">
<div class="row bs-wizard" style="border-bottom:0;">
<div class="col-xs-3 bs-wizard-step complete">
<div class="text-center bs-wizard-stepnum">Step 1</div>
<div class="progress"><div class="progress-bar"></div></div>
<img src="https://tfsassets.azureedge.net/sampletry.jpg" style="height: 35px; width: 35px; margin-top: -2px; ">
<div class="bs-wizard-info text-center">Start order</div>
</div>
<div class="col-xs-3 bs-wizard-step complete"><!-- complete -->
<div class="text-center bs-wizard-stepnum">Step 2</div>
<div class="progress"><div class="progress-bar"></div></div>
<img src="https://tfsassets.azureedge.net/sampletry.jpg" style="height: 35px; width: 35px; margin-top: -2px; ">
<div class="bs-wizard-info text-center">Payment received</div>
</div>
<div class="col-xs-3 bs-wizard-step complete"><!-- complete -->
<div class="text-center bs-wizard-stepnum">Step 3</div>
<div class="progress"><div class="progress-bar"></div></div>
<img src="https://tfsassets.azureedge.net/sampletry.jpg" style="height: 35px; width: 35px; margin-top: -2px; ">
<div class="bs-wizard-info text-center">Sorting</div>
</div>
<div class="col-xs-3 bs-wizard-step complete"><!-- active -->
<div class="text-center bs-wizard-stepnum">Step 4</div>
<div class="progress"><div class="progress-bar"></div></div>
<img src="https://tfsassets.azureedge.net/sampletry.jpg" style="height: 35px; width: 35px; margin-top: -2px; ">
<div class="bs-wizard-info text-center"> Package underway</div>
</div>
<div class="col-xs-3 bs-wizard-step disabled"><!-- active -->
<div class="text-center bs-wizard-stepnum">Step 5</div>
<div class="progress"><div class="progress-bar"></div></div>
<img src="https://tfsassets.azureedge.net/sampletry.jpg" style="height: 35px; width: 35px; margin-top: -2px; ">
<div class="bs-wizard-info text-center"> Almost delivered</div>
</div>
<div class="col-xs-3 bs-wizard-step disabled"><!-- active -->
<div class="text-center bs-wizard-stepnum">Step 6</div>
<div class="progress"><div class="progress-bar"></div></div>
<img src="https://tfsassets.azureedge.net/sampletry.jpg" style="height: 35px; width: 35px; margin-top: -2px; ">
<div class="bs-wizard-info text-center"> Delivered</div>
</div>
</div>
</div>
Related
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>
I already figure out to do the circle steps horizontally. But to do like the picture below is quite stressful. Can you figure out how to do this?
Here is code
.container-progress {
margin: 100px auto;
font-size: 24px;
font-weight: bold;
font-family: Verdana;
color: white;
margin-top: 50px;
padding: 0;
}
.progressbar {
margin: 0;
padding: 0;
counter-reset: step;
}
.progressbar li {
list-style-type: none;
width: 16%;
float: left;
font-size: 12px;
position: relative;
text-align: center;
text-transform: uppercase;
}
.progressbar li:before {
width: 5em;
height: 5em;
content: counter(step);
counter-increment: step;
line-height: 90px;
border: 2px solid #7d7d7d;
display: block;
text-align: center;
margin: 0 auto 10px auto;
padding: 0;
border-radius: 50%;
background-color: black;
font-size: 18px;
font-weight: bold;
}
.progressbar li:after {
margin-top: 30px;
width: 100%;
height: .5em;
content: '';
position: absolute;
background-color: #7d7d7d;
top: 15px;
left: -50%;
z-index: -1;
}
.progressbar li:first-child:after {
content: none;
}
.progressbar li.active {
color: white;
}
.progressbar li.active:before {
border-color: dodgerblue;
background: dodgerblue;
}
.progressbar li.active+li:after {
/*background-color: dodgerblue;*/
}
.progressbar label {
color: black;
}
<div class="container-progress">
<ul class="progressbar">
<li class="active active-step">
<label>step 1</label>
</li>
<li>
<label>step 2</label>
</li>
<li>
<label>step 3</label>
</li>
<li>
<label>step 4</label>
</li>
<li>
<label>step 5</label>
</li>
<li>
<label>step 6</label>
</li>
</ul>
</div>
Fiddle link
This uses a border on the ul to create your connecting lines and uses position:absolute to position the individual steps. You will probably need to tweak it a bit more but it could get you moving in the right direction.
Edit
To get the first three label to appear above ther cirlces, swap :before with :after. I've updated my code to reflect this.
.container-progress {
margin: 100px auto;
font-size: 24px;
font-weight: bold;
font-family: Verdana;
color: white;
margin-top: 50px;
padding: 0;
}
.progressbar {
margin: 0 50px;
padding: 0;
counter-reset: step;
position:relative;
border: 2px solid #7d7d7d;
border-left:none;
min-height:200px;
}
.progressbar li {
list-style-type: none;
width: 16%;
/*float: left;*/
font-size: 12px;
position: absolute;
text-align: center;
text-transform: uppercase;
}
/*First Three*/
.progressbar li:nth-child(-n+3)
{
top:-45px
}
/*Last Three*/
.progressbar li:nth-last-child(-n+3)
{
bottom:-75px
}
/*Left*/
.progressbar li:nth-child(1), .progressbar li:nth-child(6)
{
left:-45px
}
/*Middle*/
.progressbar li:nth-child(2), .progressbar li:nth-child(5)
{
left:calc(50% - 45px);
}
/*Right*/
.progressbar li:nth-child(3), .progressbar li:nth-child(4)
{
left:calc(100% - 45px);
}
.progressbar li:nth-last-child(-n+3):before, .progressbar li:nth-child(-n+3):after {
width: 5em;
height: 5em;
content: counter(step);
counter-increment: step;
line-height: 90px;
border: 2px solid #7d7d7d;
display: block;
text-align: center;
margin: 0 auto 10px auto;
padding: 0;
border-radius: 50%;
background-color: black;
font-size: 18px;
font-weight: bold;
}
/*.progressbar li:after {
margin-top: 30px;
width: 100%;
height: .5em;
content: '';
position: absolute;
background-color: #7d7d7d;
top: 15px;
left: -50%;
z-index: -1;
}*/
/*.progressbar li:first-child:after {
content: none;
}*/
.progressbar li.active {
color: white;
}
.progressbar li.active:before, .progressbar li.active:after {
border-color: dodgerblue;
background: dodgerblue;
}
.progressbar li.active+li:after {
/*background-color: dodgerblue;*/
}
.progressbar label {
color: black;
}
<div class="container-progress">
<ul class="progressbar">
<li class="active active-step">
<label>step 1</label>
</li>
<li>
<label>step 2</label>
</li>
<li>
<label>step 3</label>
</li>
<li>
<label>step 4</label>
</li>
<li>
<label>step 5</label>
</li>
<li>
<label>step 6</label>
</li>
</ul>
</div>
I would like to have a connecting vertical line between each circle. The "Sections" are dynamic in vertical height.
Here is the current SASS:
#import '../sass/sa.common';
$color: $sa-gray-4;
$colorActive: $sa-green;
$colorComplete: $sa-green;
.progress-indicator {
margin-bottom: 50px;
margin-top: 75px;
.step {
margin-top: 40px;
content: "";
display: table;
clear: both;
position: relative;
&:first-child {
margin-top: 0;
}
&:last-child {
div {
&.circle {
&:before {
display: none;
}
}
}
}
&.active {
div {
color: $colorActive;
&.circle {
border-color: $colorActive;
}
a {
color: $colorActive;
}
}
}
&.complete {
div {
color: $colorComplete;
&.circle {
border-color: $colorComplete;
&.filled {
background-color: $colorComplete;
color: $sa-white;
}
}
}
}
div {
color: $color;
display: table-cell;
float: left;
padding-top: 2px;
font-size: 16px;
font-weight: bold;
vertical-align: middle;
&.circle {
height: 30px;
width: 30px;
text-align: center;
border: 2px solid $color;
border-radius: 50%;
&:before {
content: "";
position: absolute;
z-index: 1;
margin-top: 26px;
left: 13px;
border: 1px solid $sa-gray-4;
height: 125%;
}
}
&.text {
padding-left: 10px;
padding-top: 5px;
ul {
margin: 0;
margin-top: 15px;
padding: 0;
list-style-type: none;
li {
a {
display: block;
margin-top: 5px;
&:first-child {
margin-top: 0;
}
}
}
}
}
}
}
}
CSS:
<style type="text/css">#charset "UTF-8";
.btn.btn-green {
background-color: #80b241;
color: #ffffff; }
.btn.btn-green:hover {
background-color: #88bc47; }
.btn.btn-gray-1 {
background-color: #595959;
color: #e7e5e1; }
.btn.btn-gray-1:hover {
background-color: #666666; }
.label.label-green {
background-color: #80b241;
color: #242424; }
.label.label-gray-1 {
background-color: #595959;
color: #ffffff; }
.btn.btn-green {
background-color: #80b241;
color: #ffffff; }
.btn.btn-green:hover {
background-color: #88bc47; }
.btn.btn-gray-1 {
background-color: #595959;
color: #e7e5e1; }
.btn.btn-gray-1:hover {
background-color: #666666; }
.label.label-green {
background-color: #80b241;
color: #242424; }
.label.label-gray-1 {
background-color: #595959;
color: #ffffff; }
.progress-indicator {
margin-bottom: 50px;
margin-top: 75px; }
.progress-indicator .step {
margin-top: 40px;
content: "";
display: table;
clear: both;
position: relative; }
.progress-indicator .step:before {
content: "";
position: absolute;
z-index: 1;
margin-top: 26px;
left: 13px;
border: 1px solid #ADABA6;
height: 125%; }
.progress-indicator .step:first-child {
margin-top: 0; }
.progress-indicator .step:last-child:before {
display: none; }
.progress-indicator .step.active div {
color: #80b241; }
.progress-indicator .step.active div.circle {
border-color: #80b241; }
.progress-indicator .step.active div a {
color: #80b241; }
.progress-indicator .step.complete div {
color: #80b241; }
.progress-indicator .step.complete div.circle {
border-color: #80b241; }
.progress-indicator .step.complete div.circle.filled {
background-color: #80b241;
color: #ffffff; }
.progress-indicator .step div {
color: #ADABA6;
display: table-cell;
float: left;
padding-top: 2px;
font-size: 16px;
font-weight: bold;
vertical-align: middle; }
.progress-indicator .step div.circle {
height: 30px;
width: 30px;
text-align: center;
border: 2px solid #ADABA6;
border-radius: 50%; }
.progress-indicator .step div.text {
padding-left: 10px;
padding-top: 5px; }
.progress-indicator .step div.text ul {
margin: 0;
margin-top: 15px;
padding: 0;
list-style-type: none; }
.progress-indicator .step div.text ul li a {
display: block;
margin-top: 5px; }
.progress-indicator .step div.text ul li a:first-child {
margin-top: 0; }
.category-selector {
margin-top: 30px; }
.category-selector .header {
border-bottom: 2px solid #80b241; }
.category-selector .header:before, .category-selector .header:after {
content: " ";
display: table; }
.category-selector .header:after {
clear: both; }
.category-selector .section-container:before, .category-selector .section-container:after {
content: " ";
display: table; }
.category-selector .section-container:after {
clear: both; }
.category-selector .section-container .section {
float: left;
height: 400px;
min-width: 150px;
overflow-y: scroll; }
.category-selector .section-container .section .item {
border-bottom: 1px solid #80b241;
cursor: pointer;
padding: 5px 10px 5px 5px; }
.category-selector .section-container .section .item:last-child {
border: 0; }
.category-selector .section-container .section .item.active {
background-color: #80b241;
color: #ffffff; }
</style>
And the Markup:
<div class="row">
<div class="col-lg-3">
<div class="progress-indicator">
<div class="step">
<div class="circle">1</div>
<div class="text">Select Category</div>
</div>
<div class="step active">
<div class="circle">2</div>
<div class="text">
Fill Out Listing
<ul>
<li>
Vital Fields
Image Url
Dimensions
</li>
</ul>
</div>
</div>
<div class="step">
<div class="circle">3</div>
<div class="text">Bulk Options</div>
</div>
<div class="step">
<div class="circle">4</div>
<div class="text">More Options</div>
</div>
</div>
<div class="text-center">
<button class="btn btn-default" style="margin-bottom: 10px;">
SAVE AS DRAFT
</button>
<button class="btn btn-gray-1">
MOVE TO PUBLISH QUEUE
</button>
</div>
</div>
<div class="col-lg-6">
<div class="category-selector">
<div class="header">
<div class="pull-left">
<h4>Select a Category</h4>
</div>
<div class="pull-right">
<button class="btn btn-green">Next</button>
</div>
</div>
<div class="section-container">
<div class="section">
<div class="item" [ngClass]="{active: selectedCategory && category.id === selectedCategory.id}" *ngFor="let category of topLevelCategories" (click)="getSubCategories(category)">
{{category.displayName}}
</div>
</div>
<div class="section" *ngIf="subCategories && subCategories.length > 0">
<div class="item" [ngClass]="{active: selectedSubCategory && subCategory.id === selectedSubCategory.id}" *ngFor="let subCategory of subCategories" (click)="getFields(subCategory)">
{{subCategory.displayName}}
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-3">
Side Nav/Slide In
</div>
</div>
Not all browsers honor the display of ::before on elements with display:table. (I have a hunch you are experiencing this in FF? - In Chrome they're displayed). There are two possible fixes:
Either replace display:table with display:flex and display: table-cell with display: block...
...or use proper html elements (divs?) instead of pseudo-elements for lines.
Other notes you might find useful:
remove z-index from .step::before
change height:125% to height:calc(100% + {N}px) where {N} is the difference in px between the actual height of .circle and 40px (top margin of .step). Using this technique you can control exact size of line and match the gap between the circles down to the pixel, thus not needing to hide the extra line length.
Hope the above makes sense and helps. Don't forget to autoprefix.
Something like:
.step {
position: relative;
&:after {
content: "";
position: absolute;
top: 0;
left: 30px; // magic number, try until you get the right positioning
width: 1px;
height: 100%;
border-left: 2px solid $any-color-you-like;
}
}
Make some adjustments, and it should work as you need.
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>
Has anybody ever encountered the problem that pictures are not shown inline in the Google Chrome browser, even though i.e. display:inline-blockand other css codes were used? In any other browser everything is depicted as it was intended. However, the 4th picture is only suddenly in another row when the site is being opened in Chrome.
The problem looks like this:
Code:
HTML
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
</head>
<li class="timeline-inverted">
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">1981-1990</h4>
</div>
<div class="timeline-body">
<p>Some text</p>
<p>Some more text</p>
</div>
</div><div class="timeline-picture-body">
<img class="timeline-images-left padding-bottom" src="http://placehold.it/250x250">
<img class="timeline-images-left padding-bottom" src="http://placehold.it/250x250">
<img class="timeline-images-left align" src="http://placehold.it/250x250">
<img class="timeline-images-left align" src="http://placehold.it/250x250">
</div>
</li>
CSS
/*body*/
body {
background-color: white;
}
.panel {
background-color: white;
color: black;
border-radius: 0;
text-align: justify;
font-size: 1.3em;
}
.panel-extra {
padding: 10px 0;
margin-top: 25px;
background-color: lightgrey;
border-radius: 0;
text-align: center;
font-size: 1.3em;
font-weight: bold;
}
.box {
padding-top: 30px;
padding-bottom: 30px;
border-bottom-width: 3px;
border-bottom-color: lightgrey;
border-bottom-style: solid;
}
/*Timeline*/
.timeline {
list-style: none;
padding: 20px 0 20px;
position: relative;
}
.timeline:before {
top: 0;
bottom: 0;
position: absolute;
content: " ";
width: 3px;
background-color: #eeeeee;
left: 50%;
margin-left: -1.5px;
}
.timeline > li {
margin-bottom: 20px;
position: relative;
}
.timeline > li:before,
.timeline > li:after {
content: " ";
display: table;
}
.timeline > li:after {
clear: both;
}
.timeline > li > .timeline-panel {
width: 46%;
float: left;
border: 1px solid #d4d4d4;
border-radius: 2px;
padding: 20px;
position: relative;
-webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
margin-bottom: 40px;
}
.timeline > li.timeline-inverted > .timeline-panel {
float: right;
}
.timeline > li.timeline-inverted > .timeline-panel:before {
border-left-width: 0;
border-right-width: 15px;
left: -15px;
right: auto;
}
.timeline > li.timeline-inverted > .timeline-panel:after {
border-left-width: 0;
border-right-width: 14px;
left: -14px;
right: auto;
}
.timeline > li.timeline-inverted > .timeline-picture-body: before {
position: absolute;
top: 26px;
right: -15px;
display: inline-block;
border-top: 15px solid transparent;
border-left: 15px solid #ccc;
border-right: 0 solid #ccc;
border-bottom: 15px solid transparent;
content: " ";
}
.timeline > li.timeline-inverted > .timeline-picture-body: after {
position: absolute;
top: 27px;
right: -14px;
display: inline-block;
border-top: 14px solid transparent;
border-left: 14px solid #fff;
border-right: 0 solid #fff;
border-bottom: 14px solid transparent;
content: " ";
}
.timeline > li.timeline-inverted > .timeline-picture-body {
float: left;
}
.timeline-title {
margin-top: 0;
color: inherit;
}
.timeline-body > p,
.timeline-body > ul {
margin-bottom: 0;
}
.timeline-body > p + p {
margin-top: 5px;
}
.timeline-images-right {
display: inline-block;
vertical-align: top;
width: 40%;
float: left;
padding: 0 10px;
}
.timeline-images-left {
display: inline-block;
vertical-align: top;
width: 40%;
float: right;
padding: 0 10px;
}
.padding-bottom {
padding-bottom: 10px;
}
.align {
display: block;
}
/*fonts*/
h1 {
text-align: center;
font-size: 3em;
color: black;
padding-top: 220px;
margin-top: 0;
}
.box h1 {
text-align: center;
font-size: 3em;
color: black;
padding-top: 30px;
margin-top: 0;
}
h2{
text-align: center;
font-size: 2.3em;
color: black;
}
p {
text-align: justify;
font-size: 1.3em;
}
Since bootstrap is being used, inserting <div class="clearfix visible-xs-block visible-sm-block visible-md-block visible-lg-block"></div> after the second picture in the code fixed the problem.
<div class="timeline-picture-body">
<img class="timeline-images-left padding-bottom" src="http://placehold.it/250x250">
<img class="timeline-images-left padding-bottom" src="http://placehold.it/250x250">
<div class="clearfix visible-xs-block visible-sm-block visible-md-block visible-lg-block"></div>
<img class="timeline-images-left align" src="http://placehold.it/250x250">
<img class="timeline-images-left align" src="http://placehold.it/250x250">
</div>