progress-bar: When adding labels to non-default height bars, text displays at the top of the bar
Created by: davethegr8
Apologies if this is a duplicate or intentional, I searched but wasn't able to find any matches.
In the latest bootstrap 4 (alpha6), when adding a non-default height to a .progress-bar
, labels render at the top of the bar.
For example, taking the basic example from https://v4-alpha.getbootstrap.com/components/progress/#labels and adding a height, the label shows at the top of the bar (I'd guess it should be middle?)
<div class="progress">
<div class="progress-bar" role="progressbar"
style="height: 2rem; width: 25%; align-items: center;"
aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
</div>
This could be addressed by adding display: flex;
and align-items: center;
to .progress-bar
but that feels a bit weird to me.
While considering the impacts to other things in these changes, I also noticed that when using multiple bars, non-default heights behave more weirdly:
Using the flex/center changes makes it a little better, but not by much.
This all seems like a lot of work & headaches, so I'd like to make a small suggestion: change up progress bars so that the height gets set on .progress
, and .progress-bar
just has height: 100%
. With the flexbox changes above, this leads to looking like so:
I think this ends up being a bit more flexible and maintainable, but I didn't want to drop a PR over the wall or come in and say "you should do things this way" because I don't know any context about why things are the way they are - I just know what I see and my uninformed assumptions.
Hopefully this helps, and I'll make a PR to detail all the differences just in case.