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

Quelqu'un peut-il confirmer qu'il n'est pas possible 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.

Confirmé.

La partie qui descend est définie sur:

1. La hauteur nécessaire pour afficher toutes les entrées, ou
2. La hauteur nécessaire pour afficher les xentrées (avec des barres de défilement pour voir le reste), où xest
   • 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 ce JSFiddle

J'ai travaillé sur un plugin jquery de remplacement pour lutter contre ce problème. À partir de cet article, il est presque impossible de le distinguer d'une liste déroulante native en termes d'apparence et de fonctionnalité .

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

voici la page 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 programmationdrunk.com pour une démo / téléchargement

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

Cependant, si vous voulez cette fonctionnalité, il existe de nombreuses options. Vous pouvez utiliser bootstrap dropdown-menuet définir sa max-heightproprié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>

En fait, vous pouvez en quelque sorte! Ne vous embêtez pas avec javascript ... J'étais juste coincé sur la même chose pour un site Web que je suis en train de créer et si vous augmentez l'attribut 'font-size' en CSS pour la balise, cela augmente également automatiquement la hauteur. Petite mais c'est quelque chose qui me dérange beaucoup ha ha

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

Dans la balise de sélection, incluez les attributs suivants où «n» est le nombre de lignes déroulantes 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 souris. 2) La position est définie sur «absolue». 3) Même s'il y a moins de «n» éléments, la liste déroulante sera toujours pour la taille de «n» éléments.

La réponse Chi Row est une bonne option pour le problème, mais j'ai trouvé une erreur dans les onclickarguments. 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)

Vous pouvez changer la hauteur d'un. N'utilisez pas height="500"(juste un numéro d'exemple). Utilisez le style. Vous pouvez utiliser une <style>balise ou simplement utiliser ceci:

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

Je souligne le changement:

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

Et encore mieux ...

style="height: 100px;">

Tu vois ça?

S'il vous plaît, votez si c'est utile!