jQueryUI Autocomplete ComboBox trop longtemps

Mon jQuery UI AutoComplete ComboBox ne dispose pas d'une barre de défilement sur le côté droit et obtient de très, malheureusement, à la longue, comme illustré ci-dessous. J'aimerais limiter cette liste à une longueur raisonnable - des idées sur la façon dont cela pourrait être réalisé? Merci!

jQuery UI AutoComplete ComboBox

35
demandé sur Richard 2012-02-07 23:44:02

6 réponses

Vous pouvez définir la hauteur via CSS:

.ui-autocomplete {
    max-height: 600px;
    overflow-y: auto;   /* prevent horizontal scrollbar */
    overflow-x: hidden; /* add padding to account for vertical scrollbar */
    z-index:1000 !important;
}
78
répondu j08691 2012-02-07 19:55:16

C'est une vieille question, alors la solution par j08691 fonctionnait bien avec les Primefaces plus anciennes, maintenant le nom de classe a changé en "ui-autocomplete-list":

.ui-autocomplete-list {
    max-height: 400px;
    overflow-y: auto;   /* prevent horizontal scrollbar */
    overflow-x: hidden; /* add padding to account for vertical scrollbar */
    z-index:1000 !important;
}
4
répondu jonnieZG 2017-05-23 12:18:20

à un moment donné, cela a changé à nouveau, à partir de jQuery-UI 1.12.1 la classe est ' ui-autocomplete.ui-front' ainsi la réponse acceptée devient:

.ui-autocomplete.ui-front {
    max-height: 600px;
    overflow-y: auto;   /* prevent horizontal scrollbar */
    overflow-x: hidden; /* add padding to account for vertical scrollbar */
    z-index:1000 !important;
}
2
répondu adejones 2017-12-03 22:38:00

commencez à chercher dans la CSS. La liste déroulante est très probablement select ou ul. Si la goutte vers le bas est enfermée dans un DIV, ajouter "overflow:auto", qui lui donnera une barre de défilement. Ou réglez la hauteur max à la div. Une autre solution consisterait à limiter les résultats. Il suffit de ne pas remplir la boîte avec autant d'entrées.

1
répondu Churk 2012-02-07 19:52:40

Créer votre propre extension et ajouter les méthodes requises:

$.widget("custom.combobox",
$.custom.combobox,
{
    //Extension metod to add custom css to input
    addInputCss: function (css) {
        this.input.addClass(css);
    },

    //Extension metod to add custom css to menu (opened select list)
    addMenuCss: function (css) {
        $(this.input.autocomplete("instance").menu.element).addClass(css);

    },
});

Exemple d'utilisation:

$("#yourSelectId").combobox().combobox("addInputCss","yourInputCss").combobox("addMenuCss","yourMenuCss");
0
répondu Uri Gorobets 2018-07-10 11:28:06
.ui-autocomplete {
    overflow-y: auto;
    height: 300px;
    overflow-x: hidden;
}

Cela ferait l'affaire. Sans barre de défilement horizontale.

0
répondu Hiran D.A Walawage 2018-09-07 09:15:32