[Primefaces] Mon Composite component perd le style (la taille des textes n'est pas la même)

**doons** · 18/02/2019, 10h17

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 :

Nom : Sans titre.png
Affichages : 313
Taille : 17,4 Ko

Nom : Sans titre.png
Affichages : 313
Taille : 17,4 Ko

Voici le code du composite component :

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
<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 :

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
<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 :

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
<!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

**OButterlin** · 18/02/2019, 10h37

Difficile de dire quelle définition est utilisée aux 2 endroits mais je te suggère d'utiliser les outils des navigateurs "modernes" pour déterminer de quelle classe vient la taille.
Avec Firefox, tu fais F12 sur ta page et tu utilises l'icône en haut à gauche avant d'aller pointer vers ton élément dans la page.
Dans la vue qui s'affiche, tu as les classes de styles associées à ton élément avec leur provenance, ça devrait t'aider à comprendre d'où vient la différence

**doons** · 18/02/2019, 16h30

J'ai effectivement pu identifier la classe qui manquait avec l'outil

Merci pour ton aide

[Primefaces] Mon Composite component perd le style (la taille des textes n'est pas la même)

JSF Java

Discussions similaires

Partager

Partager