Below, you'll notice that the dropdown menu isn't positioned correctly over other body elements like the timer. I'm utilizing bootstrap for the dropdown and redcountdown js for the timer.
https://i.sstatic.net/OO8Jm.png
Here is the HTML:
<div class="col-md-6 m-t-15" style="border-left:1px solid #fff;"><center>
<h3 class="material-animate">
<select class="selectpicker" data-live-search="true" data-width="200px" id="d_d" style="text-align:center"><option><center>Select</center></option></select>
Delegate Time</h3>
<div id="delegate_time" class="redCountdownDemo material-animate"></div>
<div class="row">
<div class="col-md-3"><input type="text" class="ttime form-control material-animate" placeholder="DD" id="dtd"></div>
<div class="col-md-3"><input type="text" class="ttime form-control material-animate" placeholder="HH" id="dth"></div>
<div class="col-md-3"><input type="text" class="ttime form-control material-animate" placeholder="MM" id="dtm"></div>
<div class="col-md-3"><input type="text" class="ttime form-control material-animate" placeholder="SS" id="dts"></div>
</div><br>
<span class="btn btn-success material-animate" id="d_update"><i class="fa fa-clock-o"></i> Update</span>
<span class="btn btn-danger material-animate" id="d_reset"><i class="fa fa-refresh"></i> Reset</span>
<div class="checkboxer form-inline">
<input type="checkbox" value="" id="mspeak">
<label for="mspeak">MSpeak</label>
</div>
</center></div>
I've attempted adjusting the position and z-index of all elements with no success. Thus, I reverted all CSS changes to their original state.
Please assist me in positioning the dropdown menu above all other body elements.
For the complete code, visit: https://github.com/lightofindia1/DiPSMUN-Moderator-App