Angular Minimum width of the minimum level of the UI boot file

I am trying to set the minimum width of an angular UT bootstrap progressbar. I checked the docs and they do not mention how to do this. I know that for a “regular” bootstrap you can use something like style="min-width: 10em;". However, this only works if you wrap it in standard bootstrap divs runs as follows:

<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 progress bar without "active" animation, since a regular bootstrap does not support this. When I try to do it like this, 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 forgot the animation section in the "regular" documents to load. However, I would like, if possible, to use the UI bootstrap progress bar.

+4
source share
1 answer

Normal Bootstrap supports animated progress bars.

Are you sure you imported Boostrap files correctly? I think you could only include a CSS file, but not JS. Take a look at the basic template to see which files you should include.

uib-progressbar. , , . , , , JS Bootstrap.


EDIT: , ui-bootstrap, -, Bootstrap JS, .

min-width : , progress-bar <uib-progressbar>. , progress-bar ( ui-bootstrap <div>, <uib-progressbar>), , DevTools).

, min-width <div>. , angular, - CSS :

.setminwidth .progress-bar {
    min-width: 20em;
}

setminwidth <uib-element> :

<uib-progressbar class="progress-striped setminwidth" value="22" type="warning">22%</uib-progressbar>

, , , . , min-width: 0; , reset , ui-bootstrap .

!important CSS, , .

, , min-width, ui-bootstrap . , , , "", % ? , , , Bootstrap: , min-width 0 %, 1% 2%.

UPD: Bootstrap, -, min-width. , ui-bootstrap hardcoded min-width: 0;, . . , CSS, .

+6

Source: https://habr.com/ru/post/1622557/


All Articles