Angular UI bootstrap progressbar minimum width - css

Question

I am trying to set the minimum width of the angular UI bootstrap progressbar. I checked the docs and they do not mention how to do this. I know for the 'regular' bootstrap you can use something like style="min-width: 10em;". However this only works if you wrap it in the standard progress bootstrap divs like so:
<div class="progress">
<uib-progressbar class="progress-striped active progress-bar" value="value" style="min-width: 10em;">
<span> text </span></uib-progressbar>
</div>
But this displays a progressbar bar without the 'active' animation since regular bootstrap does not support this. When I try it like so it does not set the min-width property
<uib-progressbar class="progress-striped active progress-bar"value="value" style="min-width: 10em;">
<span> text </span>
</uib-progressbar>
edit: I overlooked the animation section in the 'regular' bootstrap docs. I would however like to use the UI bootstrap progressbar if possible.

Answer 1

Regular Bootstrap supports animated progress bars.
Are you sure that you correctly imported Boostrap files? I think you might have included only the CSS file but not the JS. Take a look at the basic template to see which files you should include.
Take also a look at the uib-progressbar documentation. The code snippet you wrote seems to be correct. As I said, I think the reason for this problem is that you didn't include the JS file for Bootstrap.
EDIT: Oh, ui-bootstrap apparently doesn't need Bootstrap's JS, you're right.
Regarding the min-width part of your question: I noticed that you added the progress-bar class to the <uib-progressbar> element. According to the documentation, the progress-bar class should not be used (it will be added by ui-bootstrap to the <div> element that will be rendered inside <uib-progressbar>, and you can easily verify this by inspecting the progress bar width devtools).
Thus, the min-width property is to be applied to the internal <div>. However, since the rendering is managed by angular, the only way to change it is to add a CSS rule like this:
.setminwidth .progress-bar {
min-width: 20em;
}
And then add the new setminwidth class to the external <uib-element> like this:
<uib-progressbar class="progress-striped setminwidth" value="22" type="warning">22%</uib-progressbar>
I tested this but it doesn't seem to work. I think it's because min-width: 0; is hardcoded in the template, and it gets reset everytime ui-bootstrap re-renders the element.
I tried adding !important to the CSS rule, to avoid being overridden, but it doesn't work either.
I guess at this point you should consider why you need to add this min-width property, since ui-bootstrap likes to override it. Could it be because you don't want the progress bar to be "too empty" when the % is low? If that's the case, I think you should look up the changes recently introduced by Bootstrap: it seems that now they add a special min-width for 0%, 1% and 2%.
UPD: The Bootstrap folks apparently changed their mind and reverted the special min-width value. At this point, I think that ui-bootstrap should follow along and remove the hardcoded min-width: 0; as it's not needed anymore. I just sent a pull-request to them. If they merge it, you will be able to use the CSS I posted above.