Discussion :

[whorian]

Bonjour,

Je suis dans le processus d'application de styles à des composants JSF. Je compare le résultat HTML généré par un composant JSF (dans cet exemple çi t:dataTable) afin de savoir à quel tag HTML je dois associer mon CSS. Je constate un problème majeur, et je me demande si certain d'entre vous ont réussi à le contourner.

Code du composant JSF:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
<t:dataTable value="#{beanEnregistrement.listEnregistrement}" 
var="personne" 
styleClass="fixedTableHeaderTable">
   <t:column>
	<f:facet name="header">
		<t:outputText value="Prénom" />
	</f:facet>
	<t:outputText value="#{personne.prenom}" />
   </t:column>
</t:dataTable>

Ce qui génère un HTML <table> avec association à la classe CSS fixedTableHeaderTable.

La propriété de dataTable headerClass="" génère du HTML avec association CSS à la balise <th> mais pas à <thead>: c'est un problème majeur dans mon cas.

J'ai donc penser à ne pas utiliser celle-çi mais plutot de contourner le problème en CSS:

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
.fixedTableHeaderTable thead {
	font-color: black;
	font-size: 14px;
	font-weight: bold;
	text-align: right;
 
	padding-right: 2px;
	background-image: url('../images/rowBgImage-darkgreen-impair.gif');
 
	border-bottom: solid 1pt slategray;
	border-top: solid 1px slategray;
	border-left: solid 1px slategray;
 
	width: 116px; /* obligatoire pour firefox */
}

Ce code devrait appliquer les styles dans la balise <thead> qui est imbriquée dans <table class="fixedTableHeaderTable"></table>.

Le problème, c'est que le style n'est pas appliqué à la balise <thead> comme je voudrais. En fais, il n'est pas appliqué du tout, probablement dû à la génération de JSF vers HTML.

Es-ce que quelqu'un a déjà bypasser ce trouble?

[heid]

Si j'ai bien compri ton problème c'est que le style s'applique pas à la bonne balise html :

Code :

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

1
2
<thead>
<tr><th class="taclasse">

au lieu de :

<thead class= "taclasse">
<tr><th>

tu peux essayer (sans conviction) dans ta css :
thead.fixedTableHeaderTable {
}

sinon libre a toi de recréer un compostant héritant du t:datatable en y a joutant un nouvel attibut le tHeadClass