IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Liste déroulante : modification du style


Sujet :

CSS

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre éclairé
    Homme Profil pro
    Administrateur de base de données
    Inscrit en
    Février 2015
    Messages
    408
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 66
    Localisation : France, Côte d'Or (Bourgogne)

    Informations professionnelles :
    Activité : Administrateur de base de données
    Secteur : Service public

    Informations forums :
    Inscription : Février 2015
    Messages : 408
    Par défaut Liste déroulante : modification du style
    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.

  2. #2
    Membre Expert
    Avatar de Doksuri
    Profil pro
    Développeur Web
    Inscrit en
    Juin 2006
    Messages
    2 498
    Détails du profil
    Informations personnelles :
    Âge : 55
    Localisation : France

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Juin 2006
    Messages : 2 498
    Par défaut
    sans code, ca va etre difficile....

    sinon de base, une liste est <ul> ou <ol>
    La forme des pyramides prouve que l'Homme a toujours tendance a en faire de moins en moins.

    Venez discuter sur le Chat de Développez !

  3. #3
    Membre éclairé
    Homme Profil pro
    Administrateur de base de données
    Inscrit en
    Février 2015
    Messages
    408
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 66
    Localisation : France, Côte d'Or (Bourgogne)

    Informations professionnelles :
    Activité : Administrateur de base de données
    Secteur : Service public

    Informations forums :
    Inscription : Février 2015
    Messages : 408
    Par défaut
    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.

  4. #4
    Membre émérite
    Homme Profil pro
    Retraité informatique
    Inscrit en
    Juin 2012
    Messages
    519
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Yvelines (Île de France)

    Informations professionnelles :
    Activité : Retraité informatique
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : Juin 2012
    Messages : 519
    Par défaut
    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.

  5. #5
    Membre éclairé
    Homme Profil pro
    Administrateur de base de données
    Inscrit en
    Février 2015
    Messages
    408
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 66
    Localisation : France, Côte d'Or (Bourgogne)

    Informations professionnelles :
    Activité : Administrateur de base de données
    Secteur : Service public

    Informations forums :
    Inscription : Février 2015
    Messages : 408
    Par défaut
    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()"/>

  6. #6
    Membre émérite
    Homme Profil pro
    Retraité informatique
    Inscrit en
    Juin 2012
    Messages
    519
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Yvelines (Île de France)

    Informations professionnelles :
    Activité : Retraité informatique
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : Juin 2012
    Messages : 519
    Par défaut
    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

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Réponses: 4
    Dernier message: 18/09/2015, 19h54
  2. Réponses: 4
    Dernier message: 12/08/2011, 16h31
  3. Réponses: 10
    Dernier message: 08/04/2008, 17h31
  4. modification d'une liste déroulante
    Par julio02200 dans le forum Access
    Réponses: 32
    Dernier message: 23/06/2006, 15h50
  5. Modification dynamique de liste déroulante
    Par Schuss dans le forum Général JavaScript
    Réponses: 4
    Dernier message: 24/05/2006, 09h21

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo