CODEWITHSUNDEEP
twitter-bootstrap-3
nimh
nimh

Reputation: 31

Stacked progress bars with labels and min-width

I've got my stacked progress bars looking nice, with percentage labels on each, but I'm not sure how to solve when a percentage causes the bar to be too small for the label.

Setting a min-width works for non-stacked progress bars, but breaks stacked ones.

How can I fix this without hacking up bootstrap too much?

Example fiddle: http://jsfiddle.net/nimh/kx7hvxyz/

<div class="container-fluid">
<div class="row-fluid">
    <div class="panel panel-default max-width">
        <div class="panel-body">
            <div class="progress">
                <div class="progress-bar progress-bar-success" style="width: 89.74%">
                    <div class="text-left">+89.74%</div>
                </div>
                <div class="progress-bar progress-bar-danger" style="width: 10.26%">
                    <div class="text-right">-10.26%</div>
                </div>
            </div>
                            <div class="progress">
                <div class="progress-bar progress-bar-success" style="width: 10.26%">
                    <div class="text-left">+10.26%</div>
                </div>
                <div class="progress-bar progress-bar-danger" style="width: 89.74%">
                    <div class="text-right">-89.74%</div>
                </div>
            </div>
        </div>
    </div>
</div>

Upvotes: 1

Views: 2342

Answers (2)

nimh
nimh

Reputation: 31

Had a night to think about it and realized i can add a max-width percentage, as well as a min-width percentage, to keep stacked progress bars at least wide enough to show a label on both.

.progress-bar {
min-width: 15%;
max-width: 85%;
}

http://jsfiddle.net/nimh/kx7hvxyz/8/

It's not perfect (may look funny with a 99% and 1%), but will work for showing a label at all times for our needs.

Upvotes: 2

Dee
Dee

Reputation: 714

How about playing with the line-height and font-size? 

      [1]: http://www.bootply.com/Tq7YbaeOX5

/* CSS used here will be applied after bootstrap.css */
.max-width {
    max-width: 25em;
}
/* .progress-bar {
    min-width: 4em;
} */

.progress-bar {
    padding: 4px;
    line-height: 12px;

  }
  .text-Left {
    font-size: 12px;
    float: left;
    }

  .text-left, .text-right {
font-size: 7px;
      padding-right:5px;
  }
  .text_Right {
      float: right;
    }


<div class="container-fluid">
    <div class="row-fluid">
        <div class="panel panel-default max-width">
            <div class="panel-body">
                <div class="progress">
                    <div class="progress-bar progress-bar-success" style="width: 89.74%">
                        <div class="text-Left">+89.74%</div>
                    </div>
                    <div class="progress-bar progress-bar-danger" style="width: 10.26%">
                        <div class="text-right">-10.26%</div>
                    </div>
                </div>
                                <div class="progress">
                    <div class="progress-bar progress-bar-success" style="width: 10.26%">
                        <div class="text-left">+10.26%</div>
                    </div>
                    <div class="progress-bar progress-bar-danger" style="width: 89.74%">
                        <div class="text_Right">-89.74%</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Upvotes: 0

Related Questions