3 pièce(s) jointe(s)
[Primefaces] Mon Composite component perd le style (la taille des textes n'est pas la même)
Bonjour,
J'ai un problème de rendu graphique avec mon composite component. La taille de la police est différente du reste de l'application.
Dans la composite, j'ai du 16px alors que partout ailleurs c'est du 14px.
Dans l'image ci-dessous, j'ai intégré mon composite component à un dialogue d'édition :
Pièce jointe 450984
Voici le code du composite component :
Code:
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
| <html
xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:c="http://java.sun.com/jsf/core"
xmlns:composite="http://java.sun.com/jsf/composite"
xmlns:p="http://primefaces.org/ui"
xmlns:cc="http://java.sun.com/jsf/composite">
<!-- INTERFACE -->
<composite:interface
name="historiqueEntite"
shortDescription="erererre ">
<composite:attribute
name="modifications"
required="true"
type="java.util.List"
shortDescription="erererer" />
<composite:attribute
name="titre"
type="java.lang.String"
shortDescription="ererererer"
default="#{msg['HistoriqueDesModifications']}" />
<composite:attribute
name="afficherTitre"
type="java.lang.Boolean"
shortDescription="ererrerer"
required="true" />
</composite:interface>
<!-- IMPLEMENTATION -->
<composite:implementation>
<!-- !! Doit être wrappé dans un div AVEC SON PROPRE id afin de pouvoir le référencer par son nom '' dans le yhtml qui utilise ce composant !! -->
<div
id="#{cc.clientId}"
style="margin-top: 10px;"
class="Container100 ui-fluid">
<!-- AFFICHAGE DU TITRE -->
<p:outputLabel
value="#{cc.attrs.titre}"
styleClass="FontBold Fs18 hardblue"
rendered="#{cc.attrs.afficherTitre}" />
<p:dataTable
id="tableHistorique"
value="#{cc.attrs.modifications}"
var="modification"
rowKey="#{modification.id}"
emptyMessage="#{msg['AucuneDonneeAAfficher']}"
style="border:0px !important; background:none; width:100%;"
styleClass="ui-panelgrid-blank tableNoBorder"
scrollHeight="275"
scrollable="true">
<cc:insertChildren />
<!--DATE -->
<p:column
style="width:15%;"
headerText="#{msg['Property_ModificationEntite_dateModification']}">
<p:outputLabel value="#{modification.getDateModification()}">
<c:convertDateTime
type="date"
pattern="yyyy-MM-dd - HH:mm:ss" />
</p:outputLabel>
</p:column>
<!-- NOM PRENOM EMPLOYE -->
<p:column
style="width:15%;font-size:14px;"
headerText="#{msg['Property_ModificationEntite_employe']}">
<p:outputLabel value="#{modification.getNomPrenom()}" />
</p:column>
<!-- TYPE DE MODIFICATION + DETAILS DES CHAMPS MODIFIES-->
<p:column
style="width:15%;"
headerText="#{msg['Property_ModificationEntite_typeModification']}">
<p:outputLabel
id="changement"
value="#{modification.getTypeModification()}">
<p:tooltip
for="changement"
escape="false"
position="bottom"
value="#{modification.getModificationChamps()}" />
</p:outputLabel>
</p:column>
<!-- REMARQUE -->
<p:column
style="width:40%;"
headerText="#{msg['Property_ModificationEntite_remarque']}">
<p:outputLabel value="#{modification.getRemarque()}" />
</p:column>
</p:dataTable>
</div>
<p:outputLabel value="Essai pour la taille du texte" />
<p:outputLabel value="Essai pour la taille du texte en 14" style="font-size:14px;"/>
</composite:implementation>
</html> |
Le code du dialogue dans lequel le composant est ajouté :
Code:
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
| <ui:composition
template="../../../../template.xhtml"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:c="http://java.sun.com/jsp/jstl/core"
xmlns:perso="http://java.sun.com/jsf/composite/composants">
<ui:define name="dialog">
<h:form id="appDialog">
<div
id="divprinc"
class="Container100 ui-fluid"
style="width: 100%"
align="center">
<p:focus context="panel" />
<!-- le code de mon dialogue -->
<!-- AFFICHAGE -->
<perso:historiqueEntite
id="historiqueEntite"
rendered="#{not appDialog.isInCreationMode()}"
modifications="#{appDialog.modifications}"
afficherTitre="#{appDialog.isAfficherTitre()}"
titre="#{appDialog.getTitreHistorique()}" />
</div>
</h:form>
</ui:define>
</ui:composition> |
Le template du dialogue :
Code:
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
| <!DOCTYPE html>
<html
xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:c="http://java.sun.com/jsp/jstl/core">
<h:head>
<f:facet name="first">
<meta
http-equiv="X-UA-Compatible"
content="IE=edge" />
<meta
http-equiv="Content-Type"
content="text/html; charset=UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<meta
name="apple-mobile-web-app-capable"
content="yes" />
</f:facet>
<h:outputStylesheet
name="css/font-icon-layout.css"
library="sentinel-layout" />
<h:outputStylesheet
name="css/sentinel-layout.css"
library="sentinel-layout" />
<h:outputStylesheet
name="css/core-layout.css"
library="sentinel-layout" />
<h:outputStylesheet
name="perso-style.css"
library="css" />
<h:outputScript
name="js/layout.js"
library="sentinel-layout" />
<ui:insert name="head" />
<title>#{editionDialog.getDialogTitle()}</title>
</h:head>
<h:body style="background:none">
<p:messages
autoUpdate="true"
escape="false" />
<ui:insert
id="dialog"
name="dialog" />
<p:spacer height="10px"></p:spacer>
<p:panelGrid
id="buttonPanel"
columns="2"
styleClass="ui-panelgrid-blank tableNoBorder"
style="margin-left: auto; margin-right: auto;">
</p:panelGrid>
</h:body>
</html> |
Est-ce que qqun sait pourquoi le style n'est pas le même ?
Un grand merci pour votre aide
