web-dev-qa-db-fra.com

Hauteur d'une zone de sélection HTML (liste déroulante)

Quelqu'un peut-il confirmer qu'il est non possible de changer la hauteur d'une liste déroulante affichée lorsque vous cliquez sur une zone de sélection? 

L'attribut size de la sélection le fait ressembler à une liste, l'attribut height dans le CSS ne fait pas beaucoup de bien non plus. 

htmlhtml-select
80
mkoryak

Confirmé.

La partie qui tombe est définie sur:

  1. La hauteur nécessaire pour afficher toutes les entrées, ou
  2. La hauteur nécessaire pour afficher les entrées x (avec les barres de défilement pour voir le reste), 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 stupéfiante de 11 entrées vierges.

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

88
scunliffe

je travaille sur un plugin de remplacement jquery de liste déroulante pour lutter contre ce problème. À ce jour, il est presque impossible de distinguer un menu déroulant natif en termes d’apparence et de fonctionnalités .

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 } _

(update:) 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 une démo/téléchargement

5
mkoryak

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 y a beaucoup d'options. Vous pouvez utiliser bootstrap dropdown-menu et définir sa propriété max-height. 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>

2
Raman Sahasi

En fait, vous pouvez le faire! Ne vous embêtez pas avec javascript ... J'étais juste bloqué 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 le tag, il augmentera automatiquement la hauteur. Petit mais c'est quelque chose qui me dérange beaucoup ha ha

2
Aniqa Arif

Le Chi Row answer est une bonne option pour le problème, mais j'ai trouvé une erreur dans les arguments onclick. 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)

0
CatalanProgrammer

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" correspond au nombre de lignes de liste déroulantes qui seraient visibles.

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

Cette solution pose trois problèmes. 1) Il y a un flash rapide de tous les éléments montré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 conservera la taille de 'n'.

0
Chi Row