I followed a tutorial to make the following progress stepper. It won't show step 1 when it is set to active. The other steps work when they are set to active. Can someone please help me understand what needs to be changed in the CSS to allow step 1 to show as active?
I realize I could choose a different stepper, but I like this one because it's CSS only and I would like to learn from this issue.
.container {
width: 100%;
position: absolute;
z-index: 1;
}
.progressbar li {
float: left;
width: 20%;
position: relative;
text-align: center;
list-style: none;
}
.progressbar {
counter-reset: step;
}
.progressbar li:before {
content: counter(step);
counter-increment: step;
width: 30px;
height: 30px;
border: 2px solid #bebebe;
display: block;
margin: 0 auto 10px auto;
border-radius: 50%;
line-height: 27px;
background: white;
color: #bebebe;
text-align: center;
font-weight: bold;
}
.progressbar li:after {
content: '';
position: absolute;
width: 100%;
height: 3px;
background: #979797;
top: 15px;
left: -50%;
z-index: -1;
}
.progressbar li:first-child:after {
content: none;
}
.progressbar li.active+li:after {
background: #3aac5d;
}
.progressbar li.active+li:before {
border-color: #3aac5d;
background: #3aac5d;
color: white
}
<div class="container">
<ul class="progressbar">
<li class="active">Step 1</li>
<li>Step 2</li>
<li>Step 3</li>
<li>Step 4</li>
<li>Step 5</li>
</ul>
</div>
If you add the active class to each <li> after it's done, then simply removing the +li from your selectors seems to work:
Fiddle: https://jsfiddle.net/fwpadbty/
Related
I have a list of items that I want to turn into a progress steps in CSS.
ol {
width: 800px;
}
li {
display: inline-block;
color: transparent;
height: 25px;
width: 25px;
background-color: #abc;
border-radius: 50%;
border: 2px solid #08f;
margin-right: 150px;
}
li:last-child {
margin-right: 0;
}
li:not(:last-child)::before {
content: "";
border: 2px solid #08f;
margin-left:25px;
width: 153px;
display: inline-block;
}
<ol>
<li>Step 1</li>
<li>Step 2</li>
<li>Step 3</li>
<li>Step 4</li>
</ol>
What I ideally want to do is:
Stop Step 4 from disappearing off the bottom
Use the content of the <li> as a label above the circle
Make the total width equal to 80% of the viewport width
I'm just trying to teach myself some more advanced CSS, and I've seen this pattern used somewhere else - but I've been trying for an hour or so to get there with no joy.
This is a learning exercise for me, so would love some explanation with the answer if you have the time.
Thanks,
body {
display: grid;
place-items: center;
margin: 0;
padding: 36px;
}
ol {
display: flex;
width: 80%;
padding: 12px 0;
}
li {
position: relative;
padding: 0;
flex-grow: 1;
height: 2px;
background: #08f;
display: flex;
align-items: center;
}
li:last-child {
margin-right: 0;
flex-grow: 0;
}
li::after {
content: "";
position: absolute;
left: 0;
display: inline-block;
color: transparent;
height: 24px;
width: 24px;
background: #abc;
border-radius: 50%;
border: 2px solid #08f;
}
span {
position: absolute;
top: -36px;
left: 12px;
width: max-content;
transform: translateX(-50%);
z-index: 1;
}
<ol>
<li><span>Step 1</span></li>
<li><span>Step 2</span></li>
<li><span>Step 3</span></li>
<li><span>Step 4</span></li>
</ol>
In my code the nodes are the pseudo elements, and I use the flex-grow property so that the rules (that are the li tags) are properly distributed. font-size: 0 hides the text and removes it from the content-size of the elements as well.
---- edit:
I removed the font-size: 0 and added span tags for the labels and the css to position it.
I am trying to make a dropdown box with submenus appearing horizontally, which can also scroll vertically.
I have gotten everything working except for the scroll.
.dropdown-container {
background: white;
border: 1px solid #666;
cursor: pointer;
line-height: 24px;
height: 24px;
position: relative;
width: 150px;
}
.dropdown-container a {
color: black;
padding: 0 10px;
text-decoration: none;
}
.dropdown-container:after {
color: #666;
content: '\f107';
font-family: FontAwesome;
position: absolute;
right: 2px;
top: 0px;
}
.dropdown-container:before {
content: attr(data-content);
padding: 0 10px;
}
.dropdown-container li > a:not(:only-child):after {
content: '\f105';
font-family: FontAwesome;
position: absolute;
right: 4px;
top: 0px;
}
.dropdown-container ul {
background: white;
border: 1px solid #666;
display: none;
right: 1px; /*Why is it being nudged 1px right relative to parent?*/
list-style: none;
margin: 0;
max-height: 80px;
overflow-x: visible;
overflow-y: auto; /*This is the problematic line, remove this and the rest works*/
padding: 0;
position: relative;
width: 100%;
}
.dropdown-container:hover > ul {
display: block;
}
.dropdown-container ul li {
background: white;
position: relative;
}
.dropdown-container ul li:hover {
background: rgba(173, 216, 230, 0.6);
}
.dropdown-container ul li:hover > ul {
display: block;
}
.dropdown-container ul ul {
display: none;
position: absolute;
left: 150px;
width: 150px;
top: -1px; /*Another 1px adjustment required, why aren't they already aligned?*/
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<div class="dropdown-container" role="nav" data-content="Title">
<ul class="dropdown">
<li>
Select 1
</li>
<li>
Select 2
<ul>
<li>
Select 2.1
<ul>
<li>
Select 2.1.1
</li>
</ul>
</li>
<li>
Select 2.2
</li>
</ul>
</li>
<li>
Select 3
</li>
<li>
Select 4
</li>
</ul>
</div>
See JSfiddle here.
But if I set overflow-y on the <ul> to auto to enable scrolling then my submenus get hidden as in the snippet above.
I believe the problem is the same as in this question: when overflow-y: auto and overflow-x: visible, overflow-x is treated as auto too.
Unfortunately the solution suggested (wrapping the <ul> in a position: relative element) has not worked for me.
Does anyone know of another way around this?
How do I create something like this in bootstrap ?
I was thinking of making 4 columns each one of the nodes using the grid layout. But the center node is taking more space than it should take.
Here is the bootply http://www.bootply.com/5ni6EJeTWM
As of now it looks like this
Here is what I came up with. It is not perfect but it should help you get on the track.
UPDATED the code - FULLY RESPONSIVE NOW !!!
.node-list {
margin-bottom: 10px;
overflow: hidden;
width: 100%;
padding: 0px;
margin: 0px;
}
.node-list li {
list-style-type: none;
color: white;
text-transform: uppercase;
font-size: 14px;
width: 25%;
float: left;
position: relative;
text-align: center;
}
.node-list li p {
color: #000;
font-weight: bold;
}
.node-list li:after {
content: '';
width: 20px;
height: 20px;
line-height: 20px;
display: block;
font-size: 18px;
color: #000;
background: #fff;
border: 10px solid #000;
margin: 0 auto 5px auto;
}
.node-list li:before {
content: '';
width: 100%;
height: 6px;
background: #000;
position: absolute;
left: -50%;
bottom: 20px;
z-index: -1
}
.node-list li:first-child:before {
content: none;
}
<ul class="node-list">
<li class="active">
<p>ABC</p>
</li>
<li class="">
<p>ABC</p>
</li>
<li class="">
<p>ABC</p>
</li>
<li class="">
<p>ABC</p>
</li>
</ul>
I'm just trying to connect some dots with an ordered list but I cannot make it work. I want to turn on a segment according to the active class and additionally I want to add the name of the student between the segment like this picture
Then I can switch to turn on the other segment with the class active.
This is what I've been trying to do.
jsfiddle
UPDATE
I updated my fiddle because I forgot to add the class active to the li element
UPDATE
I updated again my fiddle to show where I should go the name of the person.
ol.timetable li {
min-width: 25%;
}
.timetable {
width: 100%;
list-style: none;
list-style-image: none;
margin: 20px 0 20px 0;
padding: 0;
}
.timetable li {
float: left;
text-align: center;
position: relative;
}
.timetable .date {
display: block;
vertical-align: bottom;
text-align: center;
margin-bottom: 1em;
color: #2B2B2B;
}
.timetable .dot {
color: black;
border: 3px solid #B2B2B2;
background-color: #B2B2B2;
border-radius: 50%;
line-height: 1.2;
width: 1.2em;
height: 1.2em;
display: inline-block;
z-index: 2;
}
.timetable .active .date,
.timetable .active .dot span {
color: black;
}
.timetable .dot:before {
content: "";
display: block;
background-color: #B2B2B2;
height: 0.4em;
width: 50%;
position: absolute;
bottom: 0.9em;
left: 0;
z-index: 1;
}
.timetable .dot:after {
content: "";
display: block;
background-color: #B2B2B2;
height: 0.4em;
width: 50%;
position: absolute;
bottom: 0.9em;
right: 0;
z-index: 1;
}
.timetable li:first-child .dot:before {
display: none;
}
.timetable li:first-child .dot:after .active {
border: 3px solid #F26227 !important;
background-color: #F26227 !important;
}
.timetable li:last-of-type .dot:after {
display: none;
}
.timetable .active .dot {
border: 3px solid #F26227;
background-color: #F26227;
}
.timetable .active .dot:before,
.timetable .active .dot:before {
background-color: #F26227;
}
<ol class='timetable'>
<li class="active">
<span class='date'>5/26/2017</span>
<span class='active dot'>
<span>
</span>
</span>
</li>
<li class="active">
<span class='date'>5/29/2017</span>
<span class='active dot'>
<span></span>
</span>
</li>
<li>
<span class='date'>6/5/2017</span>
<span class='dot'>
<span></span>
</span>
</li>
</ol>
To simplify how much CSS you need to write, I'd suggest making each line segment composed of just one long :before pseudo-element, rather than a combination of a :before and :after. This also makes it simpler to fill in the preceding line segment when the associated item is active.
For placement of the label, I'm going to assume you'll be adding/removing the <span> containing it dynamically, so it'll be up to you to determine where it should be best placed. To position and center it accordingly, I suggest absolute positioning and a small transformation to center the text.
Putting this all together, you get:
ol.timetable li {
min-width: 25%;
}
.timetable {
width: 100%;
list-style: none;
list-style-image: none;
margin: 20px 0 20px 0;
padding: 0;
}
.timetable li {
float: left;
text-align: center;
position: relative;
}
.timetable .date {
display: block;
vertical-align: bottom;
text-align: center;
margin-bottom: 1em;
color: #2B2B2B;
}
.timetable .dot {
color: black;
border: 3px solid #B2B2B2;
background-color: #B2B2B2;
border-radius: 50%;
line-height: 1.2;
width: 1.2em;
height: 1.2em;
display: inline-block;
z-index: 2;
}
.timetable .active .date,
.timetable .active .dot span {
color: black;
}
.timetable .dot:before {
content: "";
display: block;
background-color: #B2B2B2;
height: 0.4em;
width: 100%;
position: absolute;
bottom: 0.9em;
left: -50%;
z-index: 1;
}
.timetable li:first-child .dot:before {
display: none;
}
.timetable .active .dot {
border: 3px solid #F26227;
background-color: #F26227;
}
.timetable .active + .active .dot:before {
background-color: #F26227;
}
.timetable li > span:nth-child(3){
position:absolute;
right:0;
bottom:-15px;
transform: translateX(50%);
}
<ol class='timetable'>
<li class="active">
<span class='date'>5/26/2017</span>
<span class='active dot'>
<span>
</span>
</span>
<span>John Doe</span>
</li>
<li class="active">
<span class='date'>5/29/2017</span>
<span class='active dot'>
<span></span>
</span>
</li>
<li>
<span class='date'>6/5/2017</span>
<span class='dot'>
<span></span>
</span>
</li>
</ol>
Note that if the label element isn't guaranteed to be in the same place within the item, I'd suggest adding a class to it to make it easier to target with CSS. Also, if you'd like to hide any unfilled lines behind the active dots, just set the z-index on .timetable .dot:before to a negative value.
Also note the usage of the sibling selector in .timetable .active + .active .dot:before. This ensures that only the line between two active dots will be highlighted, rather than every line associated with an active item.
Hope this helps! Let me know if you have any questions.
Ok so below is a representation and description of what I am trying to achieve.
I am trying to add a navigation on the same line but after an hr tag so that the outcome is something like this...
----------------------------------------------------------------------------- Home Services Facilities About Contact
The best I can do shows one of the nav links but the others are not rendered
HTML
<ul>
<li class="active">HOME</li>
<li>SERVICES</li>
<li>FACILITIES</li>
<li>WITH US</li>
<li>CONTACT</li>
</ul>
</div>
css
body {
font-family: 'Source Sans Pro', sans-serif;
font-size: 12px;
color: #FFF;
}
.divider {
margin-top: 100px;
text-align: right;
position: relative;
}
.divider hr {
position: absolute;
z-index: 1;
width: 100%;
}
.divider ul {
float: right;
}
.divider li {
float: left;
}
.divider a {
position: absolute;
right: 0px;
top: 0px;
text-decoration: none;
color: #68C5DE;
background: #fff;
z-index: 10;
padding: 2px 20px;
}
jsfiddle
I think I may have over or under complicated things but this has left me scratching my head for 4 hours now.
Is this possible to achieve this in a way that still enables percentiles on the hr?
Any help would be much appreciated.
You have placed all links on top of each other with
.divider a {
position: absolute;
}
If the background isn't an issue then you can use a pseudo element :before to create the line then have the list items overlap it with a white background color to hide it.
HTML
<div class="nav-wrapper">
<ul class="navigation">
<li class="active">HOME</li>
<li>SERVICES</li>
<li>FACILITIES</li>
<li>WITH US</li>
<li>CONTACT</li>
</ul>
</div>
CSS
body {
font-family: 'Source Sans Pro', sans-serif;
font-size: 12px;
color: #FFF;
}
.nav-wrapper { margin-top: 50px; overflow: hidden; position: relative; }
.navigation {
float: right;
margin: 0;
padding: 0;
}
.navigation:before {
border: solid 1px #000;
content: '';
height: 0;
left: 0;
position: absolute;
top: 0.5em;
width: 100%;
}
.navigation li {
background-color: #fff;
float: left;
height: 1em;
line-height: 1em;
list-style-type: none;
margin: 0;
padding: 0 5px;
position: relative;
}
jsfiddle