CODEWITHSUNDEEP
csstwitter-bootstrap
James Monger
James Monger

Reputation: 10665

Unable to overlay elements over full progress bar

I'm having a problem overlaying an element inside a bootstrap progress bar.

The icons are overplayed on the partly filled progress bar, but on the full progress bar the icons aren't displayed.

Upvotes: 2

Views: 2703

Answers (3)

tomahaug
tomahaug

Reputation: 1476

You can achieve the desired result by applying the following code to the progress element and the div containing your icons.

Apply position: relative; to the .progress element styles:

<div class="progress" style="position: relative;">

Apply position: absolute; top: 0; right: 7px; to the div element wrapping the icons:

<div style="position: absolute; top: 0; right: 7px">
    <!-- icon elements -->
</div>

Full example solution (taken from your code and modified):

<div class="progress progress-striped active" style="background: #ddd; position: relative;">
    <div class="progress-bar progress-bar-danger" style="width: 100%; float: left;"></div>
    <div style="position: absolute; top: 0; right: 7px;">
        <span class="glyphicon glyphicon-info-sign"></span> 
        <span class="glyphicon glyphicon-new-window"></span>
    </div>
</div>

Hope this helps you :)

Upvotes: 1

Salketer
Salketer

Reputation: 15711

They are using float left... So the bar pushes them.

Try using absolute position on the div that holds the icons.

Upvotes: 0

david
david

Reputation: 3218

The icons is display even in full progress bar, but the icons is overwritten by progress bar. You can fixed it by create your own CSS and add z-index: 0; in your icons style

.modal-footer span{
    z-index: 0;
}

Upvotes: 0

Related Questions