Hauteur d'une boîte de sélection HTML (liste déroulante)

Question

Quelqu'un peut-il confirmer que son no possibilité de modifier la hauteur d'une liste déroulante qui s'affiche lorsque vous cliquez sur une boîte de sélection.

L'attribut size du select le fait ressembler à une liste, l'attribut height dans le CSS ne fait pas grand chose non plus.

Answer 1

Confirmé.

La partie qui descend est réglée sur l'un ou l'autre :

1. La hauteur nécessaire pour afficher toutes les entrées, ou
2. La hauteur nécessaire pour montrer x (avec des barres de défilement pour voir les entrées restantes), où x est
   • 20 dans Firefox et Chrome
   • 30 dans IE 6, 7, 8
   • 16 pour Opera 10
   • 14 pour Opera 11
   • 22 pour Safari 4
   • 18 pour Safari 5
   • 11 dans IE 5.0, 5.5
3. Dans IE/Edge, s'il n'y a pas d'options, une liste stupidement haute de 11 entrées vides.

Pour (3) ci-dessus, vous pouvez voir les résultats dans ceci JSFiddle

Answer 2

NON . Il n'est pas possible de modifier la hauteur d'une liste déroulante de sélection, car cette propriété est propre au navigateur.

Cependant, si vous voulez cette fonctionnalité, il existe de nombreuses options. Vous pouvez utiliser bootstrap dropdown-menu et définir son max-height propriété. Quelque chose comme ça.

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

Answer 3

J'ai travaillé sur un plugin jquery de remplacement de la liste déroulante pour combattre ce problème. A ce jour, il est presque impossible de le distinguer d'un dropdown natif en termes d'apparence et de fonctionnalités. fonctionnalité .

Voici une démo (ainsi qu'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 lien programmingdrunk.com pour la démo/le téléchargement.

Answer 4

Je sais que ce n'est pas la meilleure pratique pour changer la hauteur de la select mais il y a un code qui peut vous aider à changer la hauteur.

Utilisation de la size de l'attribut select étiquette :

<select onfocus='this.size=6;' onblur='this.size=6;' onfocusout='this.size=null;' onchange='this.size=6; this.blur();'>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
    <option>Option 4</option>
    <option>Option 5</option>
    <option>Option 6</option>
    <option>Option 7</option>
    <option>Option 8</option>
    <option>Option 9</option>
    <option>Option 10</option>
    <option>Option 11</option>
    <option>Option 12</option>
    <option>Option 13</option>
    <option>Option 14</option>
    <option>Option 15</option>
</select>

Answer 5

En fait, vous le pouvez ! Ne t'embête pas avec le 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 le CSS pour la balise alors il augmente automatiquement la hauteur aussi. C'est insignifiant, mais c'est quelque chose qui me dérange beaucoup.