2016-06-24 8 views
-1

私は自分のHTMLにBootstarpドロップダウンを使用しています。 選択したHTMLタグと同じオーバーフロー動作を実現する方法 コードスニペットを追加しました。ブートストラップドロップダウンで選択タグオーバーフロー動作を達成する方法

アイテムの複雑なスタイル(画像とボタン)が原因で選択できません。

私はwinformアプリケーション内のWeb Broser Controlでhtmlをホストしています。 htmlの下には、selectタグを使用するとアイテムを隠す他のC#コントロールがあります。私はこの情報を自分の問題を説明するために追加しました(同じ動作はIframeタグで説明できます)。

注: このHTMLをコピーする場合は、オーバーフローを達成するためにウィンドウを最小化してください。

ここをクリックしてdesirable Select behaviorを参照してください。ここ

クリックして、事前にcomparison between the controls

おかげ

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 
 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
</head> 
 
\t <body> 
 
\t \t <div class="dropdown"> 
 
\t \t <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">click me 
 
\t \t <span class="caret"></span></button> 
 
\t \t <ul class="dropdown-menu"> 
 
\t \t <li>AAA</li> 
 
\t \t <li>BBB</li> 
 
\t \t <li>CCC</li> 
 
\t \t <li>DDD</li> 
 
\t \t <li>EEE</li> 
 
\t \t <li>AAA</li> 
 
\t \t <li>BBB</li> 
 
\t \t <li>CCC</li> 
 
\t \t <li>DDD</li> 
 
\t \t <li>EEE</li> 
 
\t <li>AAA</li> 
 
\t <li>BBB</li> 
 
\t <li>CCC</li> 
 
\t <li>DDD</li> 
 
\t <li>EEE</li> 
 
\t <li>AAA</li> 
 
\t <li>BBB</li> 
 
\t <li>CCC</li> 
 
\t <li>DDD</li> 
 
\t <li>EEE</li> 
 
\t \t </ul> 
 
\t \t </div> 
 
\t \t <select style="position: fixed; left: 200px; top:0px;"> 
 
\t \t \t <option>click me too</option> 
 
\t \t \t <option>BBB</option> 
 
\t \t \t <option>CCC</option> 
 
\t \t \t <option>DDD</option> 
 
\t \t \t <option>EEE</option> 
 
\t \t \t <option>AAA</option> 
 
\t \t \t <option>BBB</option> 
 
\t \t \t <option>CCC</option> 
 
\t \t \t <option>DDD</option> 
 
\t \t \t <option>EEE</option> 
 
\t \t \t <option>AAA</option> 
 
\t \t \t <option>BBB</option> 
 
\t \t \t <option>CCC</option> 
 
\t \t \t <option>DDD</option> 
 
\t \t \t <option>EEE</option> 
 
\t \t \t <option>AAA</option> 
 
\t \t \t <option>BBB</option> 
 
\t \t \t <option>CCC</option> 
 
\t \t \t <option>DDD</option> 
 
\t \t \t <option>EEE</option> 
 
\t \t </select> 
 
\t \t <div style="color:red; font-weight:bold;">If you copy this html, minimize the window size before testing behavior<div> 
 
\t </body> 
 
</html>

答えて

0

は、

<select class="form-control" style="position: fixed; left: 200px; top:0px;"> 
+0

をこの交換を参照してくださいするには、私はあなたのコメントを理解していませんでした。 –

+0

'class = '' form-control''を選択タグ内に追加してください。 'dropdown'スタイルを追加して問題を解決します。 – SilentCoder

+0

他のスタイリングの問題のためにドロップダウンボタンを使用する必要があり、selectタグを使用することをお勧めします。 –

関連する問題