La croix ne s'affiche pas dans mon p:selectManyCheckBox mais la valeur est bien selectionnée

**GDS_Strou** · 21/11/2014, 09h55

Bonjour,

J'ai un petit problème avec un composant primefaces, le selectManyCheckBox.

Je m'explique, le composant est bien implémenté sur ma page et fonctionne parfaitement.

Cependant, lorsque je sélectionne une case à cocher, la croix n'apparait pas dans la case choisie.
Il y a juste le tour de la case à cocher qui change de couleur et devient blanc mais aucune croix dans la case...
Nom : selectManyCheckBox.png
Affichages : 305
Taille : 44,5 Ko

Nom : selectManyCheckBox.png
Affichages : 305
Taille : 44,5 Ko

Quelqu'un sait il de quoi cela peut venir ?

Merci d'avance

**OButterlin** · 21/11/2014, 10h49

A tout hasard, tu ne serais pas sur Linux et Firefox ?

Peux-tu montrer le code de ta page ?

**GDS_Strou** · 21/11/2014, 13h39

Je suis sous windows 7 et j'ai testé sur IE et ça fait exactement pareil.
Voici le code de la page :

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
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
 
<?xml version='1.0' encoding='UTF-8' ?>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml"
       xmlns:ui="http://java.sun.com/jsf/facelets"
       xmlns:h="http://java.sun.com/jsf/html"
       xmlns:f="http://java.sun.com/jsf/core"
       xmlns:p="http://primefaces.org/ui"
       xmlns:pe="http://primefaces.org/ui/extensions">
 
<ui:composition template="../../WEB-INF/templates/standard.xhtml">
 
       <ui:define name="content">
             <p:graphicImage library="images" name="home.png" width="1%"/> > Administration > Compte
             <br/>
             <b style="font-size: 30px">Modifier/supprimer un compte</b>
             <br/><br/>
 
             <h:form id="formModifierCompte" >
                    <p:growl id="message"  sticky="false" />
 
                    <p:fieldset legend="Informations compte">
                           <h:panelGrid  columns="2" style="width: 100%">   
 
                                  <h:panelGrid columns="3" style="width: 100%" >                              
                                        <p:graphicImage id="imageGrade" value="#{modifierCompteBean.champsObligatoireGrade}.png" title="Champ obligatoire" width="60%"/>
                                        <p:outputLabel for="grade" value="Grade :" />
                                        <p:selectOneMenu id="grade"       value="#{modifierCompteBean.compteSelectionnee._grade}" converter="#{genericConverter}" >
                                               <f:selectItems value="#{modifierCompteBean.listeGrades}" var="unGrade" itemValue="#{unGrade}" itemLabel="#{unGrade._libelle}" />
                                               <p:ajax update=":formModifierCompte:imageGrade" listener="#{modifierCompteBean.champsObligatoires()}" event="change"></p:ajax>
                                        </p:selectOneMenu>
 
                                        <p:graphicImage id="imagePrenom" value="#{modifierCompteBean.champsObligatoirePrenom}.png" title="Champ obligatoire" width="60%"/>
                                        <h:outputLabel for="prenom" value="Prénom :" />
                                        <p:inputMask id="prenom"       value="#{modifierCompteBean.compteSelectionnee._prenom}" maxlength="50" >
                                               <p:ajax update=":formModifierCompte:identifiant :formModifierCompte:imagePrenom" listener="#{modifierCompteBean.champsObligatoires()}" event="change"></p:ajax>
                                        </p:inputMask>
 
                                        <p:graphicImage id="imageNom" value="#{modifierCompteBean.champsObligatoireNom}.png" title="Champ obligatoire" width="60%"/>
                                        <h:outputLabel for="nom"   value="Nom :" />
                                        <p:inputText id="nom" value="#{modifierCompteBean.compteSelectionnee._nom}" maxlength="50">
                                               <p:ajax update=":formModifierCompte:identifiant :formModifierCompte:imageNom" listener="#{modifierCompteBean.champsObligatoires()}" event="change"></p:ajax>
                                        </p:inputText>                                  
                                  </h:panelGrid>                               
 
 
                                  <h:panelGrid id="col2" columns="3" style="width: 100%" >
                                        <h:outputText  value=""/>
                                        <h:outputLabel for="identifiant"  value="Identifiant :" />
                                        <p:inputText id="identifiant" value="#{modifierCompteBean.genererIdentifiant()}" disabled="true" size="40" />                                              
 
                                        <p:graphicImage id="imageUnite" value="#{modifierCompteBean.champsObligatoireUnite}.png" title="Champ obligatoire" width="60%"/>
                                        <p:outputLabel for="unite" value="Unité :" />
                                        <p:selectOneMenu id="unite"       value="#{modifierCompteBean.compteSelectionnee._escadrons}" converter="#{genericConverter}">
                                               <f:selectItems value="#{modifierCompteBean.listeEscadrons}"       var="uneUnite" itemLabel="#{uneUnite._libelle}"       itemValue="#{uneUnite}" />
                                               <p:ajax update=":formModifierCompte:imageUnite" listener="#{modifierCompteBean.champsObligatoires()}" event="change"></p:ajax>
                                        </p:selectOneMenu>                                     
 
                                  </h:panelGrid>
                           </h:panelGrid>
                    </p:fieldset>
 
                    <br/>             
 
                    <p:fieldset legend="Profil(s) alloué(s)">
 
                           <p:graphicImage id="imageProfils" value="#{modifierCompteBean.champsObligatoireProfils}.png" title="Sélectionner au minimum un profil" width="2%"/>
                           <p:selectManyCheckbox id="profils" value="#{modifierCompteBean.compteSelectionnee._tab_profils}"  layout="grid" columns="1" converter="#{genericConverter}">
                                  <f:selectItems value="#{modifierCompteBean.listeProfils}" var="profil" itemLabel="#{profil._libelle}" itemValue="#{profil}"/>
                                  <p:ajax update=":formModifierCompte:imageProfils" listener="#{modifierCompteBean.champsObligatoires()}" event="change"></p:ajax>
                           </p:selectManyCheckbox>
                    </p:fieldset>
 
                    <br/>
 
                    <center>
 
                           <h:panelGroup>
 
                           <p:commandButton value="Modifier compte"
                                            action="#{modifierCompteBean.modifierCompte()}"
                                            ajax="true"
                                            update="message :formModifierCompte"/>                                        
 
 
                           <p:commandButton value="Réactiver compte"
                                            action="#{modifierCompteBean.reactiverCompte()}"
                                            ajax="true"
                                            update="message :formModifierCompte">      
                           </p:commandButton>                  
 
 
                           <p:commandButton value="Supprimer compte"
                                            action="#{modifierCompteBean.desactiverCompte()}"
                                            ajax="true"
                                            update="message :formModifierCompte"/> 
 
 
                           <p:commandButton value="Annuler"
                                            action="rechercherCompte?faces-redirect=true;"
                                            immediate="true" />      
                </h:panelGroup>
                    </center>
 
             </h:form>
 
       </ui:define>
 
</ui:composition>
 
</html>

**tchize_** · 21/11/2014, 17h02

primefaces utilise jquery icon pour afficher ce genre d'icone.

Mon premier réflexe ce serait d'ouvrir la page avec firefox, de lancer firebug (F12) et de regarder avec firebug la case "cochée". As tous les coup elle référence une background image qui n'existe pas. Reste après à investiguer pourquoi elle n'existe pas mais, vu que tu a l'air d'avoir un thème custom, surement des ressources manquantes dans ce thème.

Voici ce que cela donne avec le thème par défaut dans le showcase:

Code html :

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

1
2
3
4
5
6
<div class="ui-chkbox ui-widget">
<div class="ui-helper-hidden-accessible">
<div class="ui-chkbox-box ui-widget ui-corner-all ui-state-default ui-state-active">
<span class="ui-chkbox-icon ui-icon ui-c ui-icon-check"></span>
</div>
</div>

Code css :

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

1
2
3
4
 
.ui-state-active .ui-icon {
    background-image: url("/showcase/javax.faces.resource/images/ui-icons_38667f_256x240.png.xhtml?ln=primefaces-aristo");
}

**GDS_Strou** · 24/11/2014, 14h02

voici le code de mon html et de mon css :

HTML

Code :

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

1
2
3
4
5
 
<div class="ui-chkbox ui-widget">
<div class="ui-helper-hidden-accessible">
</div><div class="ui-chkbox-box ui-widget ui-corner-all ui-state-default ui-state-active">
<span class="ui-chkbox-icon ui-c ui-icon ui-icon-check"></span>

CSS

Code :

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

1
2
3
4
5
6
7
8
 
.ui-state-active .ui-icon{
        background-image:url("#{
               resource['primefaces-mint-choc:images/ui-icons_e3ddc9_256x240.png']
        }
 
       ");
}

**tchize_** · 24/11/2014, 14h11

c'est le css que tu obtiens dans le browser? Si oui, ca veux dire que ta ressource css a mal été transformée par JSF, probablement parce qu'elle est écrite sur plusieurs lignes. Essaie de changer ton css en dans les sources de ton theme

Code :

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

1
2
3
.ui-state-active .ui-icon{
        background-image:url("#{resource['primefaces-mint-choc:images/ui-icons_e3ddc9_256x240.png']}");
}

La croix ne s'affiche pas dans mon p:selectManyCheckBox mais la valeur est bien selectionnée

JSF Java

Vue hybride

Discussions similaires

Partager

Partager