I have a progress bar with a custom label inside:
<div id="progress" class="progress mb-1" style="height: 20px;">
<div class="progress-bar" role="progressbar" style="width: 5.0%" aria-valuenow="5.0" aria-valuemin="0" aria-valuemax="100">1/20</div>
</div>
It works like a charm. However, the label is not displayed entirely on the left for small screens:
I've tried to get around this in a couple of ways (hardcoding the width of the bar to 2 for 1, playing around with colours) but I wonder if this is a more elegant solution for this?
You can add a second div containing the label, something like this :
<div id="progress" class="progress mb-1">
<div class="progress-label">1/20</div>
<div class="progress-bar" role="progressbar" style="width: 5.0%" aria-valuenow="5.0" aria-valuemin="0" aria-valuemax="100">1/20</div>
</div>
With some style :
.progress {
position: relative;
}
.progress-bar {
overflow: hidden;
z-index: 2;
}
.progress-label {
color: #0275D8;
position: absolute;
left: 0;
height: 100%;
top: 0;
z-index: 1;
}
Preview :
Fixed my issue with the following code:
<div id="progress" class="progress mb-1" style="height: 20px;">
<div class="progress-bar" role="progressbar" style="width: 5.0%; min-width:100px;" aria-valuenow="5.0" aria-valuemin="0" aria-valuemax="100">1/20</div>
</div>
Related
I want to have multiple progress bars using Bootstrap 4 with labels or at least text on its outer left. So far this works, but with multiple bars, it looks like an inverted stair.
What I currently have as code is the following:
<div class="container">
<p class="progress-label">
C#
</p>
<div class="progress" id="prog1">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
<span class="sr-only">20% Complete</span>
</div>
</div>
</div>
<div class="container">
<p class="progress-label">
C#
</p>
<div class="progress" id="prog1">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
<span class="sr-only">20% Complete</span>
</div>
</div>
</div>
with CSS
.progress-label {
float: left;
margin-right: 1em;
}
taken from How to put a label side by a progress bar with bootstrap?
So far I am not sure what I can do to make it work properly, with both bars aligned.
Here's a fiddle:
Try to wrap each progress bar in a div with class called 'progressHolder'. Then in CSS just add 'overflow:hidden' since you have used 'float:left' in 'progress-label.'
HTML Code:
<div class="container">
<div class="progressHolder">
<p class="progress-label">
C#
</p>
<div class="progress" id="prog1">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0"
aria-valuemax="100" style="width: 40%">
<span class="sr-only">20% Complete</span>
</div>
</div>
</div>
</div>
<div class="container">
<div class="progressHolder">
<p class="progress-label">
C#
</p>
<div class="progress" id="prog2">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0"
aria-valuemax="100" style="width: 40%">
<span class="sr-only">20% Complete</span>
</div>
</div>
</div>
</div>
CSS Code:
.progressHolder {
overflow: hidden;
}
.progress-label {
float: left;
margin: -5px 15px 15px 0;
}
Demo:
https://codepen.io/Bibeva/pen/RwNMjNB
Set the .container to float: left as well
I've added a calc to margin-top to center the text with the progress bar
.container {
float:left;
}
.progress {
margin-top: 1rem;
}
.progress-label {
float: left;
margin-top: calc(1rem - 4px);
margin-right: 1em;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="container">
<p class="progress-label">C#</p>
<div class="progress" id="prog1">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
<span class="sr-only">20% Complete</span>
</div>
</div>
</div>
<div class="container">
<p class="progress-label">C#</p>
<div class="progress" id="prog2">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
<span class="sr-only">20% Complete</span>
</div>
</div>
</div>
some points you should take care of:
container class is not recommeded to use with inner elements, it is for the layout, refer to this link: https://getbootstrap.com/docs/4.4/layout/overview/#containers
ID should be unique, can't be used on multiple elements. Use classes for multi purpose.
my suggestion is to use those css styles to achieve what you need.
.container{
margin: 10px;
}
.progress-label{
padding: 0px 10px;
float: left;
margin-bottom: 0px;
top: -4px;
position: relative;
}
Use <label> instead of <p> in progress-label
What would be the best and most clean way to do this layout with html/css?
What I have so far is https://codepen.io/sigug/pen/VxWJoJ
But that is 1) convoluted / not "clean" and 2) doesn't really work because it already looks different here than on codepen.
Thanks for any help..
body { background: #ff00c6; width: 100vw; height: 100vh; }
#icons { margin: auto auto; height: 10vh; border: 1px solid white; text-align: center; }
.icon {
float: left;
}
.small { width: 1vw; p}
.large { width: 2vw; }
<div id="icons">
<div class="icon" style="position: relative; left: 85px; top: -10px; "><img src="https://image.ibb.co/jDaNTn/icon_notice.png" class="small"></div>
<div class="icon" style="position: relative; left: 105px; top: -10px; "><img src="https://image.ibb.co/jDaNTn/icon_notice.png" class="small"></div>
<div class="icon" style="position: relative; left: 125px; top: -10px;"><img src="https://image.ibb.co/jDaNTn/icon_notice.png" class="small"></div>
<div class="icon"><img src="https://image.ibb.co/jDaNTn/icon_notice.png" class="large"></div>
<div class="icon"><img src="https://image.ibb.co/jDaNTn/icon_notice.png" class="large"></div>
<div class="icon"><img src="https://image.ibb.co/jDaNTn/icon_notice.png" class="large"></div>
</div>
Try to keep your code extensible and readable, so if you later want to add for example more rows, you easily can, by only changing the HTML markup. Maybe my solution is not 100% accurate, but I'll try to give you an idea on how to implement this layout.
var rows = document.getElementsByClassName('row');
for(var i = 1; i < rows.length; i++) {
rows[i].style.transform='translate(0,-' + i + 'vw)';
}
body {background:#ff00c6;width:100vw;height:100vh;}
#icons {border:1px solid white;}
.icon {float:left;width:2vw;height:2vw;background:url('https://image.ibb.co/jDaNTn/icon_notice.png') center center no-repeat;background-size:contain;}
.row {width:100%;height:2vw;}
.small .icon {background-size:50%}
.small .icon:first-child {margin-left:1vw;}
/* EDIT: JS solution
.row:nth-child(2) {transform:translate(0,-1vw);}
.row:nth-child(3) {transform:translate(0,-2vw);}
... */
<div id="icons">
<div class="small row">
<div class="icon"></div>
<div class="icon"></div>
<div class="icon"></div>
</div>
<div class="big row">
<div class="icon"></div>
<div class="icon"></div>
<div class="icon"></div>
<div class="icon"></div>
</div>
<div class="small row">
<div class="icon"></div>
<div class="icon"></div>
<div class="icon"></div>
</div>
</div>
EDIT:
Edited the post, using transforms you can get the desired effect.
However this way you need to edit the CSS as well, because you need to
add some more translation to each row (-1vw, -2vw, -3vw, and so
on...). It's maybe better to calculate these with javascript or php.
Provided JS solution
Sorry for the title, couldn't think about a better description for now.
Situation: Mouse over the progress bar to show a title. The small area (in my real case it is bigger) from the gray that mix with the green did not show the title. Looks like the number is a layer ahead of the progress bar.
http://jsfiddle.net/w6fpszkx/
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading text-center">Title</div>
<div class="panel-body" style="padding: 0px 15px 15px 15px;">
<p class="text-center" style="font-size: 110px; line-height: 1;">82<span style="font-size: 23px;">%</span></p>
<div class="progress">
<div title="" data-html="true" class="progress-bar progress-bar-success" style="width: 82%" data-original-title="ON TIME<br><span class='label label-success' style='display: inline-block; width: 100%; margin-bottom: 5px;'>9 (82%)</span>">
<span>9 (82%)</span>
</div>
<div title="" data-html="true" class="progress-bar progress-bar-danger" style="width: 18%" data-original-title="EXPIRED<br><span class='label label-danger' style='display: inline-block; width: 100%; margin-bottom: 5px;'>2 (18%)</span>">
<span>2 (18%)</span>
</div>
</div>
</div>
</div>
</div>
Is it possible to reduce the top and bottom gray area from the "82" number to the top and bottom limits of the numbert itself? Thanks.
Yes. you have to adjust better the line-height of your element.
.text-center {
line-height: 0.75;
}
(and I removed the value "1" you added as style online in the html)
JSFIDDLE
Edited: But to be sure your tooltip will always show just add:
.progress {
position:relative;
z-index:1;
}
so your bar will always be OVER the number:
updated FIDDLE
I'm trying to create a timeline with plotted stages like a timeline using both the progress bar and popovers statically.
I'm getting close to what I want however I have 2 issues:
The popovers are stuck on the bottom line of the progress bar, I need to have the top popovers at the top of the progress bar and visa versa for the bottom.
There is the option of a top and bottom stage (e.g. building & pest, finance) to fall at the same day (e.g. day 10) so I need to be able to specifically set their position probably by a percentage of the total progress bar width.
I've added what I have done so far into JS fiddle.
Thanks
http://jsfiddle.net/elogicmedia/pGr2M/
My HTML
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" title="" style="width: 40%">Day 4
</div>
<div style="width: 100%;">
<ul id="horizontal-style">
<li class="mypopover" data-placement="top" data-content="Signed Contract" style="width: 0%; margin-bottom: 10px;"></li>
<li class="mypopover" data-placement="bottom" data-content="Building & Pest" style="width: 40%"></li>
<li class="mypopover" data-placement="top" data-content="Finance" style="width: 0%"></li>
<li class="mypopover" data-placement="bottom" data-content="Unconditional" style="width: 50%"></li>
<li class="mypopover" data-placement="top" data-content="Settlement" style="width: 5%"></li>
</ul>
</div>
</div>
MY CSS
body {
margin-top: 100px;
}
#horizontal-style {
display: table;
width: 100%;
}
#horizontal-style li {
display: table-cell;
}
You can that this way:
http://jsfiddle.net/VHXaK/
HTML:
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" title="" style="width: 40%">Day 4</div>
<div style="width: 100%;">
<ul id="horizontal-style">
<li class="mypopover" data-placement="top" data-content="Signed Contract" style="width: 0%; margin-bottom: 10px;"></li>
<li class="mypopover" data-placement="bottom" data-content="Building & Pest" style="width: 40%"></li>
<li class="mypopover" data-placement="top" data-content="Finance" style="width: 0%"></li>
<li class="mypopover" data-placement="bottom" data-content="Unconditional" style="width: 50%"></li>
<li class="mypopover" data-placement="top" data-content="Settlement" style="width: 5%"></li>
</ul>
</div>
</div>
CSS:
body {
margin-top: 100px;
}
.progress-bar-success {
position: relative;
}
#horizontal-style {
display: table;
width: 100%;
position:absolute;
height:20px;
}
#horizontal-style li {
display: table-cell;
}
I've been using Twitter's bootstrap and I would like the text on the progress bar to be centered on the on bar regardless of value.
The below link is what I have now. I would like all text to be aligned with the bottom most bar.
Screenshot:
I've tried my best with pure CSS and I'm trying to avoid using JS if possible but I'm willing to accept it if it's the cleanest way to do it.
<div class="progress">
<div class="bar" style="width: 86%">517/600</div>
</div>
Bootstrap 5: (Same as v4x)
<div class="progress position-relative">
<div class="progress-bar" role="progressbar" style="width: 60%" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
<small class="justify-content-center d-flex position-absolute w-100">60% complete</small>
</div>
Bootstrap 4 with utility classes: (Thanks to MaPePeR for the addition)
<div class="progress position-relative">
<div class="progress-bar" role="progressbar" style="width: 60%" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
<small class="justify-content-center d-flex position-absolute w-100">60% complete</small>
</div>
Bootstrap 3:
Bootstrap now supports text within a span element in the Progress bar. HTML as provided in Bootstrap's example. (Notice the class sr-onlyis removed)
HTML:
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
<span>60% Complete</span>
</div>
</div>
... It does however only center the text according to the bar itself, so we need a little bit of custom CSS.
Paste this in another stylesheet/below where you load bootstrap's css:
CSS:
/**
* Progress bars with centered text
*/
.progress {
position: relative;
}
.progress span {
position: absolute;
display: block;
width: 100%;
color: black;
}
JsBin file: http://jsbin.com/IBOwEPog/1/edit
Bootstrap 2:
Paste this in another stylesheet/below where you load Bootstrap's CSS:
/**
* Progress bars with centered text
*/
.progress {
position: relative;
}
.progress .bar {
z-index: 1;
position: absolute;
}
.progress span {
position: absolute;
top: 0;
z-index: 2;
color: black; /* Change according to needs */
text-align: center;
width: 100%;
}
Then add text to a progress bar by adding a span element outside .bar:
<div class="progress">
<div class="bar" style="width: 50%"></div>
<span>Add your text here</span>
</div>
JsBin: http://jsbin.com/apufux/2/edit
Bootstrap 3 answer, as shown in bootstrap example
<div class="progress text-center">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
<span>60% Complete</span>
</div>
<span>40% Left</span>
</div>