HTML seçim kutusunun yüksekliği (açılır menü)

Birisi , bir seçim kutusuna tıkladığınızda gösterilen bir açılır menünün yüksekliğini değiştirmenin mümkün olmadığını onaylayabilir mi?

Select'in boyut özelliği, bir liste gibi görünmesini sağlar, CSS'deki yükseklik özelliği de pek işe yaramaz.

Onaylanmış.

Düşen kısım şunlardan birine ayarlanır:

1. Tüm girişleri göstermek için gereken yükseklik veya
2. Gösteri için gerekli yükseklik xgirişleri, nerede (kaydırma çubukları ile kalan görmek için) xolduğunu
   • Firefox ve Chrome'da 20
   • IE 6, 7, 8'de 30
   • Opera 10 için 16
   • Opera 11 için 14
   • Safari 4 için 22
   • Safari 5 için 18
   • IE 5.0, 5.5'te 11
3. IE / Edge'de, seçenek yoksa, aptalca yüksek bir 11 boşluk girişi listesi.

Yukarıdaki (3) için sonuçları bu JSFiddle'da görebilirsiniz.

Bu sorunla mücadele etmek için bir açılır yedek jquery eklentisi üzerinde çalışıyorum. Bu gönderi itibariyle, görünüm ve işlevsellik açısından yerel bir açılır menüden neredeyse ayırt edilemez .

işte bir demo (ayrıca indirmeler için bir bağlantı): http://programmingdrunk.com/current-projects/dropdownReplacement/

işte eklentinin proje sayfası:

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

(güncelle :) jquery eklenti sayfası artık çalışmıyor. Eklentimi çalışır hale getirdiklerinde muhtemelen yeni sitelerine koymayacağım, bu yüzden demo / indirme için programlamadrunk.com bağlantısını kullanmaktan çekinmeyin

HAYIR . Belirli bir açılır menünün yüksekliğini değiştirmek mümkün değildir çünkü bu özellik tarayıcıya özeldir.

Ancak bu işlevselliği istiyorsanız, birçok seçenek var. Bootstrap'i kullanabilir dropdown-menuve onun max-heightözelliğini tanımlayabilirsiniz . Bunun gibi bir şey.

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

Aslında yapabilirsin! Javascript ile uğraşmayın ... Yaptığım bir web sitesi için aynı şeye takılı kaldım ve etiket için CSS'deki 'yazı tipi boyutu' özelliğini artırırsanız, otomatik olarak yüksekliği de artırır. Küçük ama bu beni çok rahatsız eden bir şey ha ha

Bu mükemmel bir çözüm değil ama işe yarıyor.

Select etiketine aşağıdaki öznitelikleri dahil edin; burada "n", görünür olacak açılır liste satırlarının sayısıdır.

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

Bu çözümde üç sorun var. 1) İlk fare tıklaması sırasında gösterilen tüm öğeler hızlı bir şekilde yanıp söner. 2) Konum "mutlak" olarak ayarlanmıştır 3) "n" öğeden az olsa bile, açılır kutu hala "n" öğenin boyutu için olacaktır.

Ki Satır cevap sorunu için iyi bir seçenektir, ama ben bir hata buldum onclickargümanlar. Bunun yerine şöyle olur:

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

(Ve " n " harfini ihtiyacınız olan satır sayısı ile değiştirmeniz gerektiğini belirtin )

Birinin yüksekliğini değiştirebilirsiniz. Kullanmayın height="500"(Sadece örnek bir numara). Stili kullanın. <style>Etiketi kullanabilir veya sadece şunu kullanabilirsiniz:

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

Değişikliğe dikkat çekiyorum:

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

Ve daha da iyisi ...

style="height: 100px;">

Bunu görüyorsun?

İşinize yarayacaksa lütfen oy verin!