web-dev-qa-db-fra.com

Définition de la hauteur d'une boîte multisélectionnée

J'utilise Chosen avec une liste déroulante à sélections multiples et j'aimerais définir la hauteur de la boîte choisie à une taille définie.

J'ai une boîte choisie dans un dialogue avec débordement: masqué, et la boîte choisie est positionnée absolument en dehors du conteneur (pour que la liste déroulante choisie sorte correctement de la boîte de dialogue). Malheureusement, "position: absolute;" le supprime du flux et n'entraîne aucune hauteur ... ce qui rend la boîte de dialogue réduite et la sélection multiple semble en sortir. Je peux définir le conteneur parent à une hauteur fixe, mais la sélection multiple se développe à mesure que davantage d'options sont sélectionnées, et je vais toujours rencontrer le même problème sur les longues listes.

Existe-t-il un moyen de définir la sélection multiple choisie à une hauteur spécifique? Merci!

jqueryjquery-chosen
16
Joe The Coder

Nevermind ... l'a découvert moi-même en utilisant CSS:

.mycontainer {
    height: 120px;
}

.mycontainer .chzn-container-multi .chzn-choices {
    height: 120px !important;
    overflow-y: auto;
}

.mycontainer est la div qui contient la liste déroulante choisie.

S'il vous plaît cesser de modifier la réponse. Cette réponse s'aligne sur la version de Chosen qui était disponible il y a 2 ans lorsque j'ai posé la question à l'origine. Pour ceux qui utilisent des versions plus récentes (1.4.2), vous pouvez essayer de changer le préfixe "chzn" dans le CSS ci-dessus en "choisi" ... coiffant.)

20
Joe The Coder

C'est ce qui a fait le tour pour moi:

.mycontainer .chosen-choices {
  max-height: 150px;
  overflow-y: auto;
}

Vous voulez essentiellement limiter la hauteur du ul qui contient les options.

3
p.matsinopoulos
.chzn-container .chzn-results { max-height: 150px; }
3
ozgrozer

J'ai été capable de résoudre la hauteur de la liste dans la classe css ci-dessous: 

.chzn-container .chzn-results {
height: 150px;}

et j'ai le rouleau pour le reste de la liste.

2
Praveen

Toutes les autres réponses fonctionnent, mais je pense que c'est la solution la plus élégante: définissez une nouvelle hauteur maximale pour .chzn-results (par exemple 150px). Tous les autres blocs pertinents suivront. De cette façon, la liste déroulante ne sera pas trop grosse avec seulement quelques résultats.

.chzn-results {
   max-height: 150px;
}

Si vous voulez vraiment une hauteur fixe, même avec peu de résultats, utilisez simplement le code suivant:

.chzn-results {
   height: 150px;
}

(Ajoutez !important à la ligne si vous devez remplacer le comportement de chosen.css) 

2
Jasper Schulte

à partir de la version 1.8.3, cela fonctionne:

.chosen-container .chosen-results {
    max-height: 60vh;
}

Je vous recommande d'utiliser vh au lieu de px: le restitue sous forme de% de la hauteur d'écran disponible, afin qu'il ne sorte pas de l'écran.

0
Nikhil VJ