web-dev-qa-db-ja.com

HTML選択ボックスの高さ（ドロップダウン）

誰かが選択ボックスをクリックしたときに表示されるドロップダウンの高さをnotで変更できることを確認できますか？.

Selectのsize属性はリストのように見えますが、CSSのheight属性もあまり役に立ちません。

htmlhtml-select
82
mkoryak

確認済み。

ドロップダウンする部分は次のいずれかに設定されます。

  1. すべてのエントリを表示するために必要な高さ、または
  2. xエントリを表示するために必要な高さ（残りを見るためにスクロールバー付き）、ここでxはです
    • FirefoxおよびChromeで20
    • 30 in IE 6、7、8
    • 16 Opera 10
    • 14 Opera 11
    • Safari 4の場合は22
    • Safari 5の場合は18
    • 11 in IE 5.0、5.5
  3. IE/Edgeでは、オプションがない場合、11個の空白エントリのばかげた高リスト。

上記の（3）については、この結果を見ることができます JSFiddle

89
scunliffe

この問題に対処するために、ドロップダウンの置換jqueryプラグインに取り組んでいます。この投稿の時点では、外観と機能性の点でネイティブのドロップダウンとほとんど区別できません。

こちらがデモ（ダウンロードへのリンク）です： http://programmingdrunk.com/current-projects/dropdownReplacement/

プラグインのプロジェクトページは次のとおりです。

http://plugins.jquery.com/project/dropdownreplacement

（更新:) jqueryプラグインページが機能しなくなったようです。プラグインが機能するようになると、おそらくプラグインを新しいサイトに配置しないので、programdrunk.comリンクをデモ/ダウンロードに使用してください。

5
mkoryak

[〜＃〜] no [〜＃〜]。そのプロパティはブラウザ固有であるため、選択ドロップダウンの高さを変更することはできません。

ただし、その機能が必要な場合は、多くのオプションがあります。 bootstrap dropdown-menuと定義しますmax-heightプロパティ。このようなもの。

$('.dropdown-menu').on( 'click', 'a', function() {
    var text = $(this).html();
    var htmlText = text + ' <span class="caret"></span>';
    $(this).closest('.dropdown').find('.dropdown-toggle').html(htmlText);
});
.dropdown-menu {
    max-height: 146px;
    overflow: scroll;
    overflow-x: hidden;
    margin-top: 0px;
}

.caret {
          float: right;
    margin-top: 5%;
}

#menu1 {
    width: 160px; 
    text-align: left;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
   
<div class="container" style="margin:10px">
  <div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Tutorials
    <span class="caret"></span></button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
      <li><a href="#">About Us</a></li>
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
      <li><a href="#">About Us</a></li>
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
      <li><a href="#">About Us</a></li>
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
      <li><a href="#">About Us</a></li>
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
      <li><a href="#">About Us</a></li>
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
      <li><a href="#">About Us</a></li>
    </ul>
  </div>
</div>
2
Raman Sahasi

実際にあなたは缶のようなものです！ javascriptに煩わされないでください...私が作成しているWebサイトでも同じことをしているだけで、タグのCSSで 'font-size'属性を大きくすると、自動的に高さも大きくなります。ささいなことですが、それは私を悩ますものです

2
Aniqa Arif

Chi Row回答は問題の良い選択肢ですが、onclick引数でエラーが見つかりました。代わりに、次のようになります。

<select size="1" position="absolute" onclick="size=(size!=1)?1:n;" ...>

（そして、「n」を必要な行数に置き換える必要があることに言及してください）

0
CatalanProgrammer

これは完全な解決策ではありませんが、機能します。

選択タグに、次の属性を含めます。「n」は表示されるドロップダウン行の数です。

<select size="1" position="absolute" onclick="size=(size!=1)?n:1;" ...>

このソリューションには3つの問題があります。 1）最初のマウスクリック中に表示されるすべての要素のクイックフラッシュがあります。 2）位置は「絶対」に設定されます。3）「n」個未満のアイテムがある場合でも、ドロップダウンボックスは「n」個のアイテムのサイズになります。

0
Chi Row