CODEWITHSUNDEEP
csstwitter-bootstrap
Below the Radar
Below the Radar

Reputation: 7635

Bootstrap - place progress bar at the bottom of parent div

I am trying to position a progress bar at the bottom of a parent div using postion:absolute and bottom:0 but it seems that these styles are conflicting with the progress bar

<div class="progress" style="position:absolute; bottom:0px;">
        <div id="progress" class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;">
        0%
        </div>
</div>

I have created this fiddle: https://jsfiddle.net/DTcHh/12732/

What is the correct way to do that?

Upvotes: 0

Views: 4225

Answers (2)

Joseph
Joseph

Reputation: 1086

The problem is with the position being set to absolute. Your width will not automatically be put at full width.

You can try something like the following instead:

.progress {margin: 10px;} /* Apply to this class instead of body */

<div style="position:absolute; bottom:0px;width: 100%;">
    <div class="progress">
        <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;">0%</div>
    </div>
</div>

https://jsfiddle.net/DTcHh/12735/

var i = 0;

$("#nextStepBtn").click(function () {
    i++;
    if (i <= 100) {
        $(".progress").children().each(function () {
            $(this).attr("aria-valuenow", i.toString()).css("width", i.toString() + "%").html(i + '%');
        });
    }
});
 .progress {
    margin: 10px;
}

.progress-bottom-container {
    position:absolute;
    bottom:0px;
    width:100%;
}
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<button id="nextStepBtn" class="btn btn-default">Next step</button>
<br>
<br>
<div class="progress-bottom-container">
    <div class="progress">
        <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;">0%</div>
    </div>
</div>
<div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;">0%</div>
</div>

Upvotes: 3

Esko
Esko

Reputation: 682

The problem of the progress bar with the position: absolute is the width of the bar.

Give the progress bar a width of width: 96%; and you will have a corresponding progress bar.

https://jsfiddle.net/Esko/0bt93Lba/

Upvotes: 1

Related Questions