Hauteur D'une zone de sélection HTML (dropdown))

j'ai travaillé sur un plugin de remplacement dropdown jquery pour combattre ce problème. À partir de ce post, il est presque impossible de distinguer d'un déclin natif en termes de look et fonctionnalité .

voici une démo (également un lien vers les téléchargements): http://programmingdrunk.com/current-projects/dropdownReplacement /

voici la page du projet du plugin:

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

(mise à jour:) la page du plugin jquery semble ne plus fonctionner. Je ne mettrai probablement pas mon plugin sur leur nouveau site quand ils le feront fonctionner, alors n'hésitez pas à utiliser le programmingdrunk.com lien pour démo /télécharger

en fait, tu peux! Ne vous embêtez pas avec javascript... J'étais juste coincé sur la même chose pour un site Web que je fais et si vous augmentez l'attribut "font-size" dans CSS pour l'étiquette alors il augmente automatiquement la hauteur ainsi. Petite mais c'est quelque chose qui me dérange beaucoup ha ha

NON . Il n'est pas possible de changer la hauteur d'un menu déroulant select parce que cette propriété est spécifique au navigateur.

cependant si vous voulez cette fonctionnalité, alors il ya beaucoup d'options. Vous pouvez utiliser bootstrap dropdown-menu et définir sa propriété max-height . Quelque chose comme cela.

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

ce n'est pas une solution parfaite mais cela fonctionne en quelque sorte.

dans la balise select, incluez les attributs suivants où 'n' est le nombre de lignes de menu déroulant qui seraient visibles.

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

Il y a trois problèmes avec cette solution. 1) Il y a un flash rapide de tous les éléments affichés lors du premier clic de la souris. 2) La position est définie à 'absolute' 3) même s'il y a moins de ' n ' items la boîte de menu déroulant sera toujours pour la taille de n éléments.

Le Chi Ligne la réponse est une bonne option pour le problème, mais j'ai trouvé une erreur, je l' onclick arguments. Au lieu de cela, serait:

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

(et mentionnez que vous devez remplacer le " n "par le nombre de lignes dont vous avez besoin)