2017-07-01 5 views
0

以下でわかるように、ドロップダウンメニューはタイマーのような他のボディー要素上に配置されていません。私は、ブートストラップを使ってドロップダウンをしています。他のボディー要素の上にドロップダウンを配置できません

Screenshot of the current problem

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> 

私は位置し、すべての要素のZインデックスを回避しようとしていますが、何も仕事に起こっていません。だから私はすべてのCSSの変更を初期状態にリセットしました。

体の他のすべての要素の上にドロップダウンメニューを配置してください。完全なコードについては

、訪問:https://github.com/lightofindia1/DiPSMUN-Moderator-App

+0

私はそれがz-indexとpositonでなければならないと言います。たぶんdropdownはdivの子で、z-indexが低くなり、chartでdivになるでしょうか? – Wordica

+0

問題を再現する作業用のコードスニペットを提供する必要があります。誰もあなたのコードを解析することに関心がありません – LGSon

+0

また、 '

'タグは非難されました.... looooong time ago ... – LGSon

答えて

1

CSSファイル(elements.cssの多分一番下)にどこかあなたが前のものを上書きしたいこれらの2つのスタイルを追加します。

.display-animation .material-animate { 
    z-index: 1; 
    position: relative; 
} 

.display-animation h3.material-animate { 
    z-index: 2 !important; 
} 

あなたが実現しますあなたが欲しいもの!

+0

おかげで多くのように、これは実際に働いていました! – Manikiran

関連する問題