I want to create progress bars with vertical lines representing specific steps within the progression. While I can display progress bars, I am unsure how to incorporate these vertical lines. Does anyone have any suggestions or ideas on how to achieve this? Thank you.
You can see a visual depiction of what I am trying to accomplish here
If you're looking to create a chart with this structure:
<div class="chart">
<div class="horizontal-layer">
<div class="horizontal">
<h6 class="text">Skill #1</h6>
<span class="bar" style="width:50%"></span>
</div>
<div class="horizontal">
<h6 class="text">Skill #2</h6>
<span class="bar" style="width:60%"></span>
</div>
<div class="horizontal">
<h6 class="text">Skill #3</h6>
<span class="bar" style="width:90%"></span>
</div>
<div class="horizontal">
<h6 class="text">Skill #4</h6>
<span class="bar" style="width:80%"></span>
</div>
<div class="horizontal">
<h6 class="text">Skill #5</h6>
<span class="bar" style="width:100%"></span>
</div>
</div>
<div class="vertical-layer">
<div class="vertical">
<h6>Beginner</h6>
<span class="line"></span>
</div>
<div class="vertical">
<h6>Elementary</h6>
<span class="line"></span>
</div>
<div class="vertical">
<h6>Intermediate</h6>
<span class="line"></span>
</div>
<div class="vertical">
<h6>Advanced</h6>
<span class="line"></span>
</div>
<div class="vertical">
<h6>Expert</h6>
<span class="line"></span>
</div>
</div>
</div>
Along with the following CSS:
.chart{
max-width: 500px;
padding: 10px;
padding-top: 55px;
position: relative;
}
.horizontal{
margin-bottom: 10px;
display: flex;
align-items: center;
}
.horizontal .text{
flex: 0 0 75px;
}
.bar{
display: block;
height: 9px;
background: #dfdfdf;
border: 1px solid #777;
}
.vertical-layer{
position: absolute;
top: 0;
left: 85px;
display: flex;
justify-content: space-between;
width: 80%;
height: 100%;
}
.vertical{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.vertical .line{
width: 2px;
height: 100%;
background: blue;
display: block;
border: none;
}
Try implementing these code snippets to achieve the desired layout. Have fun exploring this approach!
In situations like these, there are countless ways to achieve the desired result. A simple method is to use the absolute positioning property on elements within a parent element that is positioned relative.
Check out this example: https://codepen.io/stevefrost/pen/zYwPwxO
Is there a way to change the size of the knob in an "ion-range" element when it is pressed? I have checked the documentation, but could not find any information in the "ion-range" section. I would like to make this adjustment in SCSS: Normal Behavior htt ...
I have a unordered list (ul) with individual list items (li) that are displayed within a scrollable container. This means that only 8 list items are visible at a time, but you can scroll through them to see the others. Each list item (li) has an "edit" b ...
I've been working on a project where I need to insert a div containing an image into another div. The parent div already has two other child divs set up and functioning perfectly. Here is the HTML code for the parent and child divs: <div id="conte ...
After extensive searching on Google and Stack Overflow, I finally found what seemed like the perfect solution. The logic behind it made sense and I understood it perfectly. But when I implemented it, my absolute positioned divs kept moving whenever I resiz ...
Why is the bootstrap responsive table not functioning properly with dir-paginate? I successfully created a responsive grid HTML table using bootstrap with static data, but when my angular developer colleague incorporated 'dir-paginate' to fetch d ...
At times, I find myself needing to modify specific data or a portion of it that originates from the database. For instance: If there is a description (stored in the DB) like the following: HTML 4 has undergone adjustments, expansions, and enhancements b ...
There is a div element: <div id="ddDistr" class="searchBoxSortDistrict" tabindex="1"> <ul id="ddd"> </ul> </div> I have inserted HTML from json into it: $("#ddd").html(" "), $.each(dis, function( index, value) { $("#dd ...
I'm having trouble getting my background image to display in this Ionic project using CSS. It works when I embed it directly into the HTML, but that's not an ideal solution. I vaguely recall something about using base64 for images, but I'm n ...
I created a basic calculator. Users can input a value in the designated field and then click on the '+' button. The cursor stays in the input field, allowing users to immediately enter a new value after clicking the '+'. The mouse poi ...
I am facing an issue with an angular js error angular.js:36 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.2.19/$injector/modulerr?p0=app&p1=Error%3A%20…gleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.19%2Fangular.min.js%3A18%3A139) ...
I am currently facing an issue with a page that contains multiple forms needing the same JavaScript code. This specific code is designed to add more input fields to the form, which it does successfully. However, the problem lies in the fact that it adds in ...
In this image, a red border is seen on the input fields indicating an error with some CSS style being applied. Despite this, it is difficult to determine which CSS selector is causing this as Firebug does not reveal any applied styles. https://i.stack.img ...
I am currently working on a coding project using TypeScript and JavaScript to locate a specific number provided by the user within a list. The goal is to display whether or not the number is present in the list when the 'search' button is pressed ...
I am currently working on implementing lazy loading for the product list. I have created a simulated asynchronous request to the server. Users should be able to update the page by scrolling even when all items have been displayed. The issue arises when ...
Can someone please guide me on how to make specific words bold in a sentence within the UI using HTML tags under the h() function? Your assistance is greatly appreciated. Thank you. library(shiny) ui <- navbarPage( title = 'Benvenuto&apos ...
I'm reaching out with this question because my search for a clear answer or method has come up empty. Here's what I need help with: I've set up a dropdown titled 'Number of Chassis'. Depending on the selection made in this dropdown ...
I am currently working on a project using AngularJS and I have integrated a jQuery slider into it. However, I am facing an issue where I need to change the value of a select box which is defined in a $scope array, but the functionality is not working as ex ...
Upon landing on a page, I aim for the background image to initially focus on the bottom and then pan up to the top before returning back down in a continuous loop. The code I have set up is as follows: <body> <div id="container"></div&g ...
After creating a ThreeJS application designed for a 4:3 layout with multiple buttons and features, I decided to enable Fullscreen mode using THREEx.Fullscreen.js. Although the Fullscreen mode is functioning properly, a new issue arose - the renderer size(x ...
I am currently exploring the possibility of altering the font color of the initial instance of a letter in a div. For example, if the String were 'The text' and I desired to make the color of 'e' yellow, then only the first e would be i ...