Discussion :

[denisduval75]

Bonjour,

Je souhaite modifier l'apparence de toutes mes listes déroulantes.

En CSS j'utilise par exemple .ui-tooltip pour l'apparence des infos bulle, mais quel est l'UI correspondant des listes déroulantes ou bien comment faire cela ?

Merci.

[Doksuri]

sans code, ca va etre difficile....

sinon de base, une liste est <ul> ou <ol>

[denisduval75]

Voici des exemples en CSS que j'utilise déjà :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
/* Ligne sélectionnée */
.ui-datatable tr.ui-state-highlight {
    background: linear-gradient(#14A4FF, #3AEBFF);
}
 
/* Cellules input des tableaux*/
.ui-datatable .ui-cell-editor-input {
    font-size: 0.85em;
}
 
/* Infos bulle */
.ui-tooltip { 
    font-size: 0.65em;
}

Je souhaite faire quelque chose de semblable pour toutes les listes déroulantes : modifier les couleurs de texte et de fond.

Merci.

[JefReb]

Il pourrait y avoir un peu plus de code, ne serait-ce qu'html, ce serait quand un peu plus facile!
parce que là avec 3 petites classes css qui sont apparemment pour des tableaux, je ne vois pas ce que l'on peut en faire pour la liste déroulante.

Comme l'a écrit Doksuri de base on utilise ul ou ol

Donnes nous un peu plus de code svp si tu veux qu'on aide.
C'est une liste verticale? horizontale? Comment doit-elle se comporter? etc.

[denisduval75]

En fait je n'utilise pas de listes déroulantes directement dans mon projet.
Les listes en question correspondent en fait à des tableaux du framework primefaces, et pour chacun la liste déroulante du paginator qui permet de modifier le nombre de lignes par page.

En résumé, pour chaque tableau, je souhaite modifier l'apparence de la liste du paginator qui permet de modifier le nombre de lignes par page.

A toute fin utile voici le code du datatable.
Merci.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
                <p:remoteCommand name="rcEnregistrerLignesPage" async="true" actionListener="#{contributeurManagerBean.enregistrerLignesPage()}"/>
 
                <div align="center" style="overflow-x: auto">
                    <p:dataTable id="idRefContributeur" widgetVar="widgetRefContributeur" var="contributeur" style="border-radius:3px" class="backgroundGrisMoyen" 
                                 value="#{contributeurManagerBean.colContributeurFacade.listeColContributeur}" 
                                 rowKey="#{contributeur.idPk}"
                                 scrollWidth="#{contributeurManagerBean.largeurScroll}" 
                                 scrollHeight="#{contributeurManagerBean.hauteurScroll}"
                                 scrollable="true" 
                                 frozenColumns="1" 
                                 resizableColumns="true"
                                 selectionMode="multiple" 
                                 nullSortOrder="-1"
                                 editable="true" editMode="cell" 
                                 paginator="true"
                                 paginatorPosition="bottom"
                                 paginatorTemplate="{FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
                                 rowsPerPageTemplate="5,10,15,20,25,30,40,50,100,200,300"
                                 rows="#{contributeurManagerBean.refUtilisateurFacade.lignesPageTabContributeur}">
 
                        <p:ajax event="page" oncomplete="rcEnregistrerLignesPage()"/>

[JefReb]

Bon ça n'a pas grand chose à voir avec une liste déroulante.
Dans ce cas je ne peux pas trop t'aider. désolé
Mais d'autres pourront peut être

[Invité]

Bonjour,

Si tu sais déjà ajouter des lignes de code en CSS, je ne vois pas où est le problème.

Et puisque tu veux "personnaliser", c'est à toi d'écrire le code CSS, non ?

Sinon, tu peux chercher là : https://jqueryui.com



N.B. " listes déroulantes" évoque plutôt un <select> !

[denisduval75]

Bonjour,
Le problème est que je ne sais pas quel sélecteur utiliser.
Merci.

[denisduval75]

Bonjour,
'select' était ce que je cherche.
MERCI