Ketinggian kotak pilih HTML (dropdown)

Dapatkah seseorang mengonfirmasi bahwa tidak mungkin mengubah ketinggian dropdown yang ditampilkan saat Anda mengklik kotak pilih.

Atribut ukuran yang dipilih membuatnya terlihat seperti daftar, atribut ketinggian di CSS juga tidak banyak membantu.

Dikonfirmasi.

Bagian yang turun disetel ke:

1. Tinggi yang dibutuhkan untuk menampilkan semua entri, atau
2. Ketinggian yang dibutuhkan untuk acara xentri (dengan scrollbar untuk melihat sisa), di mana xadalah
   • 20 di Firefox & Chrome
   • 30 di IE 6, 7, 8
   • 16 untuk Opera 10
   • 14 untuk Opera 11
   • 22 untuk Safari 4
   • 18 untuk Safari 5
   • 11 di IE 5.0, 5.5
3. Di IE / Edge, jika tidak ada opsi, daftar tinggi yang berisi 11 entri kosong.

Untuk (3) di atas Anda dapat melihat hasilnya di JSFiddle ini

Saya telah mengerjakan plugin jquery pengganti dropdown untuk mengatasi masalah ini. Pada posting ini, hampir tidak bisa dibedakan dari dropdown asli dalam hal tampilan dan fungsionalitas .

berikut adalah demo (juga tautan ke unduhan): http://programmingdrunk.com/current-projects/dropdownReplacement/

berikut adalah halaman proyek plugin:

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

(update :) halaman plugin jquery sepertinya tidak berfungsi lagi. Saya mungkin tidak akan meletakkan plugin saya di situs baru mereka ketika mereka membuatnya berfungsi, jadi silakan gunakan tautan programmingdrunk.com untuk demo / unduh

TIDAK . Tidak mungkin mengubah tinggi dari drop-down pilih karena properti tersebut khusus browser.

Namun jika Anda menginginkan fungsionalitas itu, maka ada banyak pilihan. Anda dapat menggunakan bootstrap dropdown-menudan menentukan max-heightpropertinya. Sesuatu seperti ini.

$('.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>

Sebenarnya Anda semacam bisa! Jangan repot-repot dengan javascript ... Saya hanya terjebak pada hal yang sama untuk situs web yang saya buat dan jika Anda meningkatkan atribut 'font-size' di CSS untuk tag maka secara otomatis meningkatkan tinggi juga. Kecil tapi itu sesuatu yang sangat menggangguku ha ha

Ini bukan solusi yang sempurna, tetapi berhasil.

Di tag pemilihan, sertakan atribut berikut di mana 'n' adalah jumlah baris drop-down yang akan terlihat.

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

Ada tiga masalah dengan solusi ini. 1) Ada kilatan cepat dari semua elemen yang ditampilkan selama klik mouse pertama. 2) Posisi diset ke 'absolute' 3) Walaupun ada kurang dari 'n' item kotak dropdown akan tetap untuk ukuran item 'n'.

Jawaban Chi Row adalah pilihan yang baik untuk masalah tersebut, tetapi saya telah menemukan kesalahan dalam onclickargumennya. Sebaliknya, akan menjadi:

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

(Dan sebutkan Anda harus mengganti " n " dengan jumlah baris yang Anda butuhkan)

Anda dapat mengubah tinggi salah satunya. Jangan gunakan height="500"(Hanya nomor contoh). Gunakan gaya. Anda dapat menggunakan <style>tag atau hanya menggunakan ini:

<!DOCTYPE html>
<html>
<body>
  <select id="option" style="height: 100px;">
    <option value="1">Option 1
    <option value="2">Option 2
  </select>
</body>
</html>

Saya menyoroti perubahan:

  <select id="option" style="height: 100px;">

Dan bahkan lebih baik ...

style="height: 100px;">

Kamu melihatnya?

Silakan pilih jika itu membantu!