I've been working on creating a two-level step progress bar using HTML and CSS, but I've run into several challenges.
Here is the code snippet I have experimented with:
{customized CSS code}{HTML code}In my attempt to align 'b' under 'c', I encountered some issues. The current output can be seen in the following image:
View the image here
The desired result should look like this:
View the desired image here
Your help and insights are greatly appreciated.
There are numerous ways to resolve the issue at hand, but perhaps the easiest is by adding some margin at the top.
#progressbar .step1:before {
margin-top: 17px; /* add css */
}
body {
color: #000;
overflow-x: hidden;
height: 100%;
background-color: #8C9EFF;
background-repeat: no-repeat;
}
.card {
z-index: 0;
background-color: #ECEFF1;
padding-bottom: 20px;
margin-top: 90px;
margin-bottom: 90px;
border-radius: 10px;
}
.top {
padding-top: 40px;
padding-left: 13% !important;
padding-right: 13% !important;
}
/*Icon progressbar*/
#progressbar {
margin-bottom: 30px;
overflow: hidden;
color: #455A64;
padding-left: 0px;
margin-top: 30px;
display: flex;
justify-content: center;
}
#progressbar li {
list-style-type: none;
font-size: 13px;
width: 7%;
float: left;
position: relative;
font-weight: 400;
}
#progressbar .step0:before {
font-family: FontAwesome;
content: "\f10c";
color: #fff;
}
#progressbar .step0:before {
width: 50px;
height: 50px;
line-height: 52px;
display: block;
font-size: 20px;
background: #C5CAE9;
border-radius: 50%;
margin: auto;
padding: 0px;
}
#progressbar .step1:before {
font-family: FontAwesome;
content: "\f10c";
color: #fff;
}
#progressbar .step1:before {
width: 26px;
height: 26px;
line-height: 28px;
display: block;
font-size: 20px;
background: #C5CAE9;
border-radius: 50%;
margin: auto;
padding: 0px;
margin-top: 17px; /* add css */
}
/*ProgressBar connectors*/
#progressbar li:after {
content: '';
width: 100%;
height: 12px;
background: #C5CAE9;
position: absolute;
top: 16px;
z-index: -1;
left: 0;
}
#progressbar li:last-child:after {
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
position: absolute;
}
#progressbar li:first-child:after {
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
position: absolute;
left: 50%;
}
#progressbar li:last-child:after {
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
#progressbar li:first-child:after {
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
/*Color number of the step and the connector before it*/
#progressbar li.active:before,
#progressbar li.active:after {
/* background: grey; */
}
#progressbar .step0:before {
font-family: FontAwesome;
/* content: "\f00c"; */
}
#progressbar li.step1:before {
font-family: FontAwesome;
/* content: "\f00c"; */
}
.icon {
width: 60px;
height: 60px;
margin-right: 15px;
}
.icon-content {
padding-bottom: 20px;
}
@media screen and (max-width: 992px) {
.icon-content {
width: 50%;
}
}
#progressbar .spec:before {
background-color: green !important;
content: "\f00c" !important;
}
#progressbar .high:before {
background-color: green !important;
content: "\f00c" !important;
}
#progressbar .mid:before {
background-color: yellow !important;
content: "\f00c" !important;
}
#progressbar .low:before {
background-color: red !important;
content: "\f00c" !important;
}
#progressbar .spec:after {
background-color: green !important;
}
#progressbar .high:after {
background-color: green !important;
}
#progressbar .mid:after {
background-color: yellow !important;
}
#progressbar .low:after {
background-color: red !important;
}
.clickable {
cursor: pointer;
}<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container-fluid px-1 px-md-4 py-5 mx-auto">
<div class="card mb-5">
<div class="row d-flex justify-content-between px-3 top"></div>
<!-- Add class 'active' to progress -->
<div class="row d-flex justify-content-center">
<div class="col-12">
<ul id="progressbar" class="text-center">
<li class="active step0 spec" id="a">
<p class="font-weight-bold mt-3 node">a</p>
</li>
<li class="active step1 clickable" id="b">
<p class="font-weight-bold mt-3 node ">b
</p>
</li>
<li class="active step1 clickable" id="c">
<p class="font-weight-bold mt-3 node">c
</p>
</li>
<li class="active step0" id="d">
<p class="font-weight-bold mt-3 node">d</p>
</li>
</ul>
</div>
</div>
</div>
</div>I have successfully set up a DSpace repository on Ubuntu 16.04 LTS by following the installation instructions provided in this manual. After deploying the webapps, I encountered an issue when trying to add new items. Upon clicking the search link, I recei ...
As a beginner in wordpress, I am looking to customize the CSS of my single product page specifically to relocate the "Sale" icon. Despite trying the code below in custom CSS, no changes are being reflected. @media only screen and (max-width: 767px){ .sin ...
Is there a way to dynamically populate a dropdown menu for states and cities using jQuery? I have a JSON file with the state-city mapping, how can I implement this? Here is an example of the JSON file: [ { "state":"Karnataka", "cities": ...
We have a unique setup on our mobile website where it functions as a single page application using cfmanifest to load cache. However, we are facing an issue after login when users navigate between 5 to 10 pages and need to submit confidential data through ...
I currently have a collection consisting of 6 different JSON files. en.json es.json fr.json it.json ja.json zh.json An illustration of the data present in each file is as follows (in this instance, considering en.json): { "SomeText": "Test in Englis ...
After creating a list of names displayed in an <ul>, I implemented some CSS styling only to encounter browser-specific issues. In Chrome: The list element is shifted by one row. In Firefox: All list items are collapsing into one item. Here&apo ...
<div class="button button-icon topPull"> <div class="button button-icon"><i class="icon ion-android-cart"></i><a class="icon-circle icon-circle-outline" style="position: absolute; right: 0; bottom: 0;"> <i>{{car ...
Similar Question: How can I prevent the back button from working in IE and Firefox? I'm currently working on a single page website (DAM) that requires user authentication to enter. After logging in, if a user clicks the back button, they are dire ...
I'm looking to create a fixed footer that will stay at the bottom of the page if there isn't enough content to fill it. I've been researching ways to achieve this using CSS, but many of the methods don't easily translate to React/Next.j ...
I am currently using S3 upload function in Node.js to upload files to an S3 bucket. The frontend of the application is built on Angular. However, my client now requires that all uploads be directed to the S3 bucket via a presigned URL. I am wondering if th ...
Here is the code for my form: <form id="ereserva" action="index.php" method="post"> <fieldset> <label for="id">ID</label> <input type="id" name="ei" id="eid" readonly class="id text ui-widget-content ui-corner ...
INFORMATION: clientHeight: Retrieves the height of an element, taking into account padding offsetHeight: Obtains the height of an element, considering padding, border, and scrollbar Analyzing the Data: The value returned by offsetHeight is expected to ...
My current node version is 12.22.6. I'm struggling to understand why this code isn't working correctly. It seems like I must be missing an important basic concept, but I can't quite pinpoint it. const changeVars = (variable) => { c ...
Currently, I am attempting to integrate a time picker widget into a jQuery plugin called dForm. The specific timepicker widget can be found at the following link: https://github.com/jonthornton/jquery-timepicker Despite reviewing the dForm documentation, ...
Just starting out with Boostrap and struggling to identify what might be causing this issue on my Create view and how to resolve it. https://i.sstatic.net/nWNkc.jpg Below is the relevant section of my view: <h3 class="text-primary pl-3"> ...
I recently encountered a challenge while working with the csv-parser library in node for parsing large CSV files. The files I work with can range from 50,000 to 500,000 lines or even larger. My task involved performing computations on this data and then su ...
Currently, I am developing a PHP script that retrieves the directories and files from specified local computer drives. The goal I am striving for is to enable users to upload an image to my server by clicking on its name from the listing, without using th ...
I am looking to enhance my text with a background image, a text-stroke, and a text-shadow. The issue I am facing is that the text-shadow appears on top of the background image. Does anyone have a solution for placing the shadow behind the image? If you te ...
I am having trouble continuously loading the content of a div from another page. Using alert worked fine, but the page data is not loading. JavaScript <script> $(document).ready(function(){ setInterval(function(){$("#loadAvailable").load("update.p ...
I've encountered an issue when applying text-shadow to an input field, where the shadow appears to clip around the text. Here is the CSS code I used: @import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900& ...