Ngx-bootstrap: Progressbar classes are no longer working

Created on 14 Jan 2017 · 12Comments · Source: valor-software/ngx-bootstrap

After updating to BS4 Alpha 6 and ng2-bootstrap 1.2.1 the progress bar is no longer applying the progress classes for me. I've tried numerous things but my progress bar is always a solid green. I can't get stripes to work either. With my current settings I fully expect to see the progress bar in blue and striped.

This was working with BS4 Alpha 5 and ng2-bootstrap 1.1.16-11.

<progress class="progress progress-striped" style="width: 100px;" value="100" max="100"></progress>

comp(progressbar) easy (hours) issue

Source

critchie

Most helpful comment

PR in progress

valorkin on 6 Jun 2017

👍2

All 12 comments

There are were some breaking changes in bootstrap v3->v4 related to progress bar
can you check classes and styles applied to your progress bar and compare to
http://valor-software.com/ng2-bootstrap/index-bs4.html#/progressbar

valorkin on 16 Jan 2017

The documentation for ng2-bootstrap is still pointing to Alpha 5 which is why I think the docs are still working. So it is hard to do an actual comparison.

Viewing source of docs:
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" rel="stylesheet">

This is a breaking change from BS4 Alpah 5 -> BS4 Alpha 6 it seems.

Here is a link to the the Alpha 6 progressbar documentation: Progressbar

It appears in Alpha 6, Bootstrap moved away from using the <progress> element and are now using a combination of <div> elements.

I'm not sure what to look at next. I'm not sure where the disconnect is.

critchie on 16 Jan 2017

I swapped out the ng2-bootstrap component with the BS4 Alpha 6 way of doing things and this is what it looks like.

<div class="progress" style="width: 100px;">
    <div class="progress-bar progress-bar-striped" [style.width.%]="myObject.progress"></div>
</div>

The width: 100px on the outer div is just to keep the overall progress bar from being 100% width and is a design choice by me.

So the outer div sets up the overall gray background bar and the inner div paints the "blue" actual progress part of the bar. The inner div is where you set the progress-bar-striped or bg-success type classes. You set the width of the inner div to the actual progress value to show the overall progress.

critchie on 17 Jan 2017

Not to beat a dead horse... :-)

Now that you have updated the demo to Alpha 6 with this commit: "fixed(demo): now should use bs4 alfa.6" you can see that the progress bars are not working.

BS4 Progressbar

critchie on 19 Jan 2017

👍1

Ups :)

valorkin on 19 Jan 2017

I am on BS4 alpha 6 and I have the same issues . I can still use <progress> element . But the new combination of <div> elements doesnt seem to work with me .

<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-
valuemax="100"></div>
</div>

The above code doesnt work with me . It displays nothing . I checked the documentation it didnt help either .