web-dev-qa-db-fra.com

Comment définir la hauteur maximale d'un élément "choisi" développé (plugin jQuery)

Pour le moment, j'utilise un widget JQuery sélectionné dans une boîte de dialogue JQuery et dès que vous ouvrez la liste déroulante, la taille de la liste déroulante provoque un débordement de la boîte de dialogue, ce qui entraîne: (notez qu'il y a deux barres de défilement , une pour la liste déroulante et une pour la boîte de dialogue, ce qui rend le défilement pratiquement inutile:

http://i.imgur.com/bCTCDCq.png?1

Est-il possible de définir:

  • Le nombre maximum d’éléments affichés avant le défilement,
  • La hauteur maximale de la liste déroulante sélectionner/choisi, ou
  • La hauteur maximale de l'un des éléments contenant

De telle sorte que cela ressemblera plus à ça (c'est un photoshop, c'est comme ça que je veux que ça ressemble):

http://i.stack.imgur.com/M27ul.png

c'est-à-dire qu'il n'y a pas de débordement dans la boîte de dialogue, car seuls 8 éléments sont affichés avant le défilement.

jqueryhtmlcsshtml5jquery-chosen
12
Miguel

tl; dr: Ajoutez cette règle CSS à votre styles.css: 

.chosen-container .chosen-results {
    max-height:100px;
}

Au départ, je ne comprenais pas cela, mais ce sélecteur s’applique en fait aux classes à l’intérieur du choix (la bibliothèque génère ses propres éléments HTML séparés de l’élément <select>). en vous référant au conteneur dans lequel vous, concepteur, avez placé le choix, afin qu’il fonctionne dans toutes les situations.

Cependant, même lorsque je me suis rendu compte que ce sélecteur ne fonctionnait pas, car.css a exactement le même sélecteur, et parce que le la dernière règle déclarée gagne , ma règle n’a aucun effet. Il y a deux solutions à cela:

  • Ajoutez !important à votre règle personnalisée (probablement de manière incorrecte)

OR

  • Assurez-vous que votre styles.css est déclaré après Choisi.css. Mes liens étaient dans cet ordre:

    <link rel="stylesheet" href="css/main.css">

    <link rel="stylesheet" href="chosen/chosen.css">

    Si vous modifiez l'ordre pour que votre fichier principal.css (ou le nom de votre fichier de styles personnalisé) soit déclaré après , le problème sera également résolu.

24
Miguel

J'ai résolu ce problème de la manière suivante.

.chosen-container .chosen-results {
    color: #444;
    position: relative;
    overflow-x: hidden;
    overflow-y: auto;
    margin: 0 4px 4px 0;
    padding: 0 0 0 4px;
    max-height: 240px;
   -webkit-overflow-scrolling: touch;
}
0
Rajkumar R

La réponse de Miguel n'a pas fonctionné pour moi, mais au contraire:

.dropdown-menu {
    max-height:250px !important;
    overflow-y: scroll;
}
0
Kelsey