Issue
I am facing a bit of an issue and I can't seem to figure it out.
I am trying to create a button and add a bootstrap progress bar at the bottom of it, but I cant seem to figure out how to get it to do just that.
Here's my current setup. https://jsfiddle.net/bob_mosh/7qeazm9w/3/
HTML:
<button id="sample_button" type="button" class="soundButton">
<label class="buttonTitle">Bird Song</label>
<label class="buttonDescription">A nice bird song.</label>
<div class="progress volume-slider">
<div class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</button>
CSS:
.soundButton {
display: table-cell;
background-color: rgba(255, 255, 255, 0.650);
margin: 4px;
padding: 8px;
width: 250px;
height: 120px !important;
border-radius: 8px;
border: none !important;
float: left !important;
}
.soundButton label {
color: rgba(37, 38, 43, 1.00) !important;
}
body {
background-color: rgba(37, 38, 43, 1.00)
}
.buttonTitle {
font-weight: 700;
font-size: 1.5em;
display: block;
}
.volume-slider {
bottom:0;
height: 8px !important;
}
This is the current state on the right and the way I am envisioning it on the left.
For some reason I cant get the absolute positioning to work. Every time I try to set the position of the progress bar to absolute, it completely disappears. Can anyone help me figure this out?
Solution
All you need to do is add position: relative;
to your .soundButton
class then copy this to your .volume-slider
.volume-slider {
position: absolute;
bottom: 0;
right: 0;
left: 0;
height: 8px !important;
}
Working sample fiddle HERE
Answered By - JkAlombro Answer Checked By - Robin (PHPFixing Admin)
0 Comments:
Post a Comment
Note: Only a member of this blog may post a comment.