Discussion :

[denisduval75]

Bonjour,
Dans une appli web, j'utilise JSF (2.2) et Primefaces (6.1.2) pour afficher des tableaux (datatable).
Lorsque je scroll vers le bas d'un tableau pour afficher les dernières lignes et que je sélectionne une ligne,
j'obtiens un décalage :



Ce décalage se produit avec Edge, IE et Chrome, mais pas avec Firefox.

Les 2 premières colonnes sont fixes (frozen).
Si je les remplace par des colonnes simples, le décalage ne se produit pas mais j'ai besoin de ces colonnes pour un scroll vers la droite.

Quelqu'un a une idée ? Merci.

Mon code :

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
<p:dataTable id="idRefSynthese" widgetVar="widgetSynthese" var="ligne" rowIndexVar="iLigne" class="tableauStyle" tableStyle="table-layout: auto"
                                     value="#{syntheseManagerBean.listeRefSynthese}" 
                                     rowKey="#{ligne.idPk}"
                                     selection="#{syntheseManagerBean.refSyntheseSelection}" 
                                     scrollWidth="#{utilitaireManagerBean.tableauSyntheseLargeur}" 
                                     scrollHeight="#{utilitaireManagerBean.tableauSyntheseHauteur}"
                                     frozenColumns="2"
                                     emptyMessage="Aucun enregistrement trouvé"
                                     scrollable="true"
                                     resizableColumns="true"
                                     liveResize="true"
                                     selectionMode="single">
                            <p:ajax event="rowSelect" update="idPictos"/>
                            <p:ajax event="rowUnselect" update="idPictos"/>
                            <p:ajax event="rowDblselect" listener="#{syntheseManagerBean.initialisationListeDetailLigneDoubleClic()}"/>
 
                            <f:facet name="header">
                                <h:outputLabel value="Synthèse" class="gris"/>
                                <p:fragment id="idPictos">
                                    <div class="tableauPicto">
                                        <p:commandLink actionListener="#{syntheseManagerBean.initialisationListeDetailLigne()}"
                                                       oncomplete="PF('widgetDetailLigne').show()"
                                                       update="form:idDetailLigne"
                                                       disabled="#{empty syntheseManagerBean.refSyntheseSelection or syntheseManagerBean.refSyntheseSelection.type eq 'S'}">
                                            <p:graphicImage id="idImageDetail" value="images/Detail.png" class="tableauPictoMarge"/>
                                            <pe:tooltip value="Détail" for="idImageDetail" myPosition="bottom right" atPosition="top center" hideEvent="mouseout click"/>
                                        </p:commandLink>
                                        <p:commandLink ajax="false">
                                            <p:graphicImage id="idImageExcel" value="images/Excel.png" class="tableauPictoMarge"/>
                                            <pe:tooltip value="Tableau Excel" for="idImageExcel" myPosition="bottom right" atPosition="top center" hideEvent="mouseout click"/>
                                            <p:dataExporter type="xls" 
                                                            target="form:idRefSyntheseExport"
                                                            fileName="Synthese"
                                                            preProcessor="#{syntheseManagerBean.preProcessXLS}"
                                                            postProcessor="#{utilitaireManagerBean.postProcessXLS}"/>
                                        </p:commandLink>                          
                                        <p:commandLink>
                                            <p:printer target="form:refSynthesePrint"/>
                                            <p:graphicImage id="idImageImprimer" value="images/Imprimer.png" class="tableauPictoMarge"/>
                                            <pe:tooltip value="Imprimer" for="idImageImprimer" myPosition="bottom right" atPosition="top center" hideEvent="mouseout click"/>
                                        </p:commandLink>
                                    </div>
                                </p:fragment>
                            </f:facet>
 
                            <p:columns value="#{syntheseManagerBean.listeColonneModele}" var="colonne" columnIndexVar="iColonne" 
                                       style="width: #{utilitaireManagerBean.tableauColonneLargeur[iColonne]}px}"
                                       class="tableauContour>
 
                                <f:facet name="header">
                                    <div class="titreColonneContainer">
                                        <div style="width: #{utilitaireManagerBean.tableauColonneLargeur[iColonne]}px" class="titreColonne">
                                            <h:outputText value="#{colonne.entete}" class="texteGris"/> 
                                        </div>
                                    </div>
                                </f:facet>
 
                                    <h:outputText value="#{ligne.type eq 'S' ? '&nbsp;' : ligne[colonne.valeur]}"
                                                  style="font-weight: #{ligne.type eq 'T' ? 'bold' : 'normal'}"
                                                  class="texteGris"
                                                  rendered="#{iColonne lt utilitaireManagerBean.tableauColonneFixe and ligne.idLigne ne 38}"/> 
                                    <h:outputText value="#{ligne[colonne.valeur]}"
                                                  style="color: white"
                                                  class="texteGris"
                                                  rendered="#{iColonne lt utilitaireManagerBean.tableauColonneFixe and ligne.idLigne eq 38}"/> 
 
                                <!--Colonnes Année-->
                                    <h:outputText value="#{ligne.type eq 'S' ? '&nbsp;' : syntheseManagerBean.rechercherMontant(iLigne, iColonne)}"
                                                  style="font-weight: #{ligne.type eq 'T' ? 'bold' : 'normal'}"
                                                  class="celluleOutputMontantTableau texteGris"
                                                  rendered="#{iColonne ge utilitaireManagerBean.tableauColonneFixe and ligne.idLigne ne 38}"/>
                                    <h:outputText value="#{syntheseManagerBean.rechercherMontant(iLigne, iColonne)}"
                                                  style="color: white"
                                                  class="celluleOutputMontantTableau"
                                                  rendered="#{ligne.idLigne eq 38}"/>
                            </p:columns>
 
                            <f:facet name="footer">
                                <div class="tableauFooter">
                                    <c:set var="listeFiltre" value="#{syntheseManagerBean.listeDetailLigne.size()}"/>
                                    <c:set var="listeLigne" value="#{syntheseManagerBean.listeDetailLigne.size()}"/>
                                    <h:outputText value="#{listeFiltre == 0 || listeFiltre == listeLigne ? null : listeFiltre}"/>
                                    <h:outputText value="#{listeFiltre == 0 || listeFiltre == listeLigne ? null : '&nbsp;/&nbsp;'}"/>
                                    <h:outputText value="#{listeLigne}" class="texteGris"/>
                                    <h:outputText value="#{listeLigne lt '2' ? 'ligne' : 'lignes'}" class="texteGris tableauFooterMarge"/>
                                </div>
                            </f:facet> 
 
                        </p:dataTable>

Le CSS au cas où :

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
.tableauStyle { 
    line-height: 13px;
    background-color: lightgrey; 
    border: 2px solid lightgrey; 
    border-radius: 2px; 
}
 
.tableauContour {
    border-color: lightgrey !important;
}
 
.titreColonneContainer {
    width: 100%; 
    display: flex; 
    justify-content: center; 
}
 
.titreColonne {
    position: relative; 
    top: 1px;
    margin: 0 2px; /* Attention : 2px à gauche et à droite obligatoires (sinon les en-têtes de colonne sont décalées) */
}
 
.celluleOutputMontantTableau {
    float: right;    
}
 
.tableauFooterMarge {
    margin-left: 5px;
}