Comment pouvez-vous définir la hauteur maximale de l'élargissement d'une “Choisi” de l'élément (plugin jQuery)

Pour le moment je suis en utilisant un Choisi widget JQuery à l'intérieur d'un JQuery boîte de dialogue, et dès que vous ouvrez la zone de liste déroulante, la taille de la liste déroulante de la boîte de dialogue de débordement, à l'origine de ce: (notez qu'il y a deux barres de défilement, un pour la zone de liste déroulante, et un pour la boîte de dialogue, ce qui rend le défilement assez inutile:

Comment pouvez-vous définir la hauteur maximale de l'élargissement d'une “Choisi” de l'élément (plugin jQuery)

Est-il un moyen de définir:

  • Le nombre max d'éléments affichés avant d'avoir à faire défiler,
  • La hauteur max de la sélection choisie/zone de liste déroulante, ou
  • La hauteur maximum de l'un des contenant des éléments

Tel qu'il apparaît plus comme ça (c'est un photoshop, c'est la façon dont je veux qu'il regarde):

Comment pouvez-vous définir la hauteur maximale de l'élargissement d'une “Choisi” de l'élément (plugin jQuery)

c'est à dire pas de débordement dans la fenêtre de dialogue, parce qu'il y a seulement 8 points affiché avant que vous avez à faire défiler.

pourquoi ne pas jeter un oeil à la documentation et pour votre max - height: .chosen-container .chosen-results {max-height:100px;} qui pourraient être trouvés par l'inspection de l'élément
À partir du lien ci-dessus, réglez la largeur à quelque chose de moins de 100%, et de la régler de sorte que le conteneur n'a pas de "débordement".
réduire le nombre d'éléments visibles avant que vous faites défiler. essayez de rendre 6 au lieu de 8. je pense que la propriété est max_selected_options.
Oui, je pense que j'ai lu que le post - le problème est que je n'ai aucun moyen de savoir à quels types d'élément .choisi conteneur des et des .choisis-les résultats, sans parler de leur heirachy
Qui définit le nombre maximum de choses qui peuvent être , mais n'affecte pas le nombre de choses affiche

OriginalL'auteur Miguel | 2014-01-14

  1. 24

    tl;dr: Ajouter cette règle CSS pour vos styles.css:

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

    D'abord je n'ai pas compris, mais ce sélecteur est en fait l'application à des catégories à l'intérieur de Choisi (la bibliothèque génère ses propres éléments html qui sont séparé de la <select> élément) Ils ne sont pas référence au conteneur que vous, le concepteur, a mis le Choisi, afin qu'ils fonctionner dans n'importe quelle situation.

    Cependant, même lorsque j'ai réalisé que ce sélecteur ne fonctionnerait pas choisi.css a exactement le même sélecteur, et parce que le dernière déclaré règle gagne, ma règle n'a eu aucun effet. Il y a deux solutions à cela:

    • Ajouter !important à votre règle personnalisée (probablement le mauvais sens)

    OU

    • Assurez-vous que vos styles.css est déclaré après choisi.css. Mes liens sont dans l'ordre:

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

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

      Si vous modifiez l'ordre de sorte que votre main.css (ou ce que vous avez appelé vos styles personnalisés fichier) est déclaré après, le problème va être résolu.

    donc cela peut et doit être fait via CSS à l'aide de l' !- il important? J'espérais que si il y avait de mieux dans la construction de Dojo options.. 🙁
    Pas de. Lire l'ensemble du post

    OriginalL'auteur Miguel

  2. 0

    De Miguel réponse n'a pas fonctionné pour moi, mais ce n':

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

    OriginalL'auteur Kelsey

  3. 0

    J'ai résolu ce problème de la façon 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;
}

    OriginalL'auteur Rajkumar R