Partage
  • Partager sur Facebook
  • Partager sur Twitter

CSS : modifier selecteur .UI

    15 octobre 2021 à 10:04:02

    Bonjour,

    Dans une page XHTML j'utilise plusieurs listes déroulantes et je souhaite modifier l'aspect de l'une de ces listes lorsque je la désactive.

    Dans la console à l'exécution, je vois les sélecteurs CSS suivants :

    .ui-state-disabled, .ui-widget-content .ui-state-disabled, .ui-widget-header .ui-state-disabled 

    Si j'ajoute par exemple 'color: #666666;' pour modifier la couleur de texte, cette modification s'applique à toutes les listes désactivées.

    Comment faire pour cibler uniquement une liste en particulier ?

    J'ai essayé ceci sans succès  (liste6 est l'id de la liste à modifier) :

    .liste6 .ui-state-disabled, .ui-widget-content .ui-state-disabled, .ui-widget-header .ui-state-disabled

    Merci beaucoup.

    -
    Edité par DenisDuval 15 octobre 2021 à 10:56:46

    • Partager sur Facebook
    • Partager sur Twitter
      15 octobre 2021 à 10:27:14

      Bonjour, envoyez aussi le html qui va avec 

      -
      Edité par zvheer 15 octobre 2021 à 12:52:02

      • Partager sur Facebook
      • Partager sur Twitter
        15 octobre 2021 à 10:56:21

        Voici le html :

        <p:selectOneMenu id="liste5" value="#{graphiqueUtilisateurManagerBean.serieCourante.tableau}" style="width: 308px; line-height: 10px">
                                        <c:forEach items="#{graphiqueUtilisateurManagerBean.listeRefTable}" var="table">
                                            <f:selectItem itemLabel="#{table.intitule}" itemValue="#{table.reference}"/>
                                        </c:forEach>
                                        <p:ajax event="change"
                                                listener="#{graphiqueUtilisateurManagerBean.modifierSerieTableau(true)}" 
                                                update="idDonneeType idDonnee idBoutonSerie"/>
                                    </p:selectOneMenu>
        
        <p:selectOneMenu id="liste6" value="#{graphiqueUtilisateurManagerBean.serieCourante.ligne}" style="width: 308px; line-height: 10px"
                                                     disabled="#{graphiqueUtilisateurManagerBean.serieCourante.tableau eq '9999'}">
                                        <c:forEach items="#{graphiqueUtilisateurManagerBean.serieCourante.listeSerie}" var="donnee" varStatus="status">
                                            <f:selectItem itemLabel="#{donnee}" itemValue="#{graphiqueUtilisateurManagerBean.serieCourante.listeSerieIdLigne.get(status.index)}"
                                                          itemDisabled="#{status.index gt 0 ? graphiqueUtilisateurManagerBean.serieCourante.listeGroupe.get(status.index -1) : false}"/>
                                        </c:forEach>
                                        <p:ajax event="change"
                                                listener="#{graphiqueUtilisateurManagerBean.serieModifier()}" 
                                                update="idDonnee idBoutonSerie"/>
                                    </p:selectOneMenu>

        Sélecteurs CSS :

        .ui-state-disabled, .ui-widget-content .ui-state-disabled, .ui-widget-header .ui-state-disabled
        

        Je souhaite modifier l'apparence de liste6 uniquement.

        Merci.


        -
        Edité par DenisDuval 15 octobre 2021 à 10:59:09

        • Partager sur Facebook
        • Partager sur Twitter
          16 octobre 2021 à 10:12:22

          Bonjour,

          un id, en CSS, se préfixe avec "#" et non ".".

          • Partager sur Facebook
          • Partager sur Twitter

          Pas d'aide concernant le code par MP, le forum est là pour ça :) (en plus je n'y connais rien en C)

            16 octobre 2021 à 11:46:55

            Bonjour. Désolé mais ça ne marche pas mieux !
            • Partager sur Facebook
            • Partager sur Twitter
              16 octobre 2021 à 11:56:43

              Il faut préfixer chaque sélecteur .ui-* avec #liste6.
              • Partager sur Facebook
              • Partager sur Twitter

              Pas d'aide concernant le code par MP, le forum est là pour ça :) (en plus je n'y connais rien en C)

                17 octobre 2021 à 9:28:10

                Bonjour,

                J'ai déplacé #liste6 qui n'était pas bien placé vers f:selectItem

                Coté CSS, j'ai préfixé avec #liste6 mais ça ne veut toujours pas fonctionner !

                <p:selectOneMenu id="idDonnee" value="#{graphiqueUtilisateurManagerBean.serieCourante.ligne}" style="width: 308px; line-height: 10px" class="idDonnee" disabled="#{graphiqueUtilisateurManagerBean.serieCourante.tableau eq '9999'}">
                    <c:forEach items="#{graphiqueUtilisateurManagerBean.serieCourante.listeSerie}" var="donnee" varStatus="status">
                          <f:selectItem id="liste6" itemLabel="#{donnee}" itemValue="#{graphiqueUtilisateurManagerBean.serieCourante.listeSerieIdLigne.get(status.index)}" itemDisabled="#{status.index gt 0 ? graphiqueUtilisateurManagerBean.serieCourante.listeGroupe.get(status.index -1) : false}"/>
                    </c:forEach>
                    <p:ajax event="change" listener="#{graphiqueUtilisateurManagerBean.serieModifier()}" update="idDonnee idBoutonSerie"/>
                </p:selectOneMenu>



                #liste6 .ui-state-disabled, #liste6 .ui-widget-content #liste6 .ui-state-disabled, #liste6 .ui-widget-header #liste6 .ui-state-disabled



                -
                Edité par DenisDuval 17 octobre 2021 à 9:43:49

                • Partager sur Facebook
                • Partager sur Twitter
                  17 octobre 2021 à 9:39:05

                  OK, je me suis mal exprimée : je ne parlais pas des classes, mais des sélecteurs. Un sélecteur c'est l'ensemble entre deux virgules. C'est un peu la base du CSS, il faudrait tester et bidouiller un peu ;)
                  • Partager sur Facebook
                  • Partager sur Twitter

                  Pas d'aide concernant le code par MP, le forum est là pour ça :) (en plus je n'y connais rien en C)

                  CSS : modifier selecteur .UI

                  × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
                  • Editeur
                  • Markdown