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.
Confirmé.
La partie qui tombe est définie sur:
x
(avec les barres de défilement pour voir le reste), où x
est Pour (3) ci-dessus, vous pouvez voir les résultats dans ceci JSFiddle
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
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>
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
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)
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'.