Discussion :

[Bobble]

Salut!
j'ai crée une dataTable avec richfaces 3.1.6.
J'ai aussi crée un skin personnalisé.

J'aimerais mettre un padding entre les cellules de la table, mais je n'y arrive pas.
Je n'ai pas trouvé un paramètre dans le skin, je n'ai pas trouvé un paramètre que je peut ajouter dans le skin...
j'ai essayé de mettre un style sur les colonnes directement:

Code :

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

<rich:column style="padding: 5;">

mais je n'y arrive pas....

est-ce qu'il est possible de mettre du padding à une dataTable de RichFaces?
Si oui, pouvez vous me fournir un exemple, des détails, un tutoriel qui l'explique,... svp?

Merci d'avance!

[Sniper37]

oui il est possible, tu peux utiliser les classes, columnClasses..
Tu peux utiliser FireBug pour voir les styles appliqués et s'ils sont au bon endroit..

[Bobble]

ça ne fonctionne pas...à chaque fois que je bouge quelque chose il y a tout qui change.... de plus FF et IE n'affichent pas la même chose!!

Il y a un bon tutoriel quelque part? qui explique quoi changer?

Si non, j'ai installé FireBug, ça aide. Merci!
J'ai pu constater que en plus de la class que j'assigne, il y a des autres classes. Genre "dr-table-header", "rich-table-header-continue", ...

ces quoi ces classes? je peux les modifier directement? je les trouve où?

[Bobble]

je reviens avec des détails.
Je crois que finalement mon problème c'est le "border-collapse: separate;"
qui n'est pas tenu en compte...

J'ai mis toutes les valeurs de mon skin à "#null". Comme ça, je pense que seulement le style CSS donné sera pris en compte.

voilà mon 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
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
.standardTable {
	font-family : verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000000;
    padding: 10;
    border-style: solid;
    border-width: 5px;
}
 
.standardTable_Header {
	color: #000000;
    background-color: #b2d4fa;
    padding: 10;
    text-align: center;
    border-style: solid;
    border-width: 5px;
}
 
.standardTable_Row1 {
    background-color: #d8d8d8;
    border-style: solid;
}
 
.standardTable_Row2 {
    background-color: #b2d4fa;
    border-style: solid;
}
 
.standardTable_Column {
    vertical-align: top;
}
 
.standardTable_ColumnCentered {
    vertical-align: top;
	text-align: center;
}

voilà ma dataTable:

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
<rich:dataTable 
	var="tt2" value="#{terminalAcquirers.acquirers}" id="ttList"			
	styleClass="standardTable"
	headerClass="standardTable_Header"
	footerClass="standardTable_Header"
	rowClasses="standardTable_Row1,standardTable_Row2"> 		
	<f:facet name="header">
		<rich:columnGroup>		
			<rich:column colspan="4" style="border-style: solid; border-width: 1px 1px 1px 1px; border-color: #00FF00">
				<h:outputText value="b" />
			</rich:column>
			<rich:column colspan="4"  breakBefore="true">
				<h:outputText value="bub2" />
			</rich:column>
			<rich:column colspan="3"  breakBefore="true">
				<h:outputText value="Client(s) found(s): " />
			</rich:column>
			<rich:column>
				<h:outputText value="132" />
			</rich:column>	
			<rich:column breakBefore="true">
				<h:outputText value="Name" />
			</rich:column>
			<rich:column>
				<h:outputText value="123" />
			</rich:column>							
			<rich:column>
				<h:outputText value="Company" />
			</rich:column>
			<rich:column>
				<h:outputText value="Phone" />
			</rich:column>
		</rich:columnGroup>
	</f:facet>		
	<rich:column>
		<h:outputText value="#{tt2.acqID}" />
	</rich:column>
	<rich:column>
		<h:outputText value="dede" />
	</rich:column>					
	<rich:column>
		<h:outputText value="sdfg" />
	</rich:column>
	<rich:column>
		<h:outputText value="col" />
	</rich:column>
</rich:dataTable>

J'ai mis les images du résultat de ce code en annexe (FF.jpg).
Et j'aimerais que ça devienne comme "res.jpg". J'arrive à "res.jpg" avec

Code :

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

1
2
3
4
5
6
7
8
9
10
<x:dataTable
	preserveDataModel="true"
	id="aas"
	var="aa"
	value="#{ta.aa}"
	styleClass="standardTable" style="font-size: 10px; width:101%"
	headerClass="standardTable_Header"
	footerClass="standardTable_Header"
	rowClasses="standardTable_Row1,standardTable_Row2"
	columnClasses="standardTable_ColumnCentered,standardTable_ColumnCentered,standardTable_Column,standardTable_Column,standardTable_ColumnCentered,standardTable_ColumnCentered,standardTable_ColumnCentered,standardTable_Column,standardTable_Column">

j'ai ajouté

Code :

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

style="border-collapse: separate;"

partout dans le CSS, sur la table, sur les colonnes,..

j'ai essayé de mettre dans mon .css

Code :

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

1
2
3
.dr-table {
   border-collapse: separate;
}

mais rien nonplus... ce qui est bizarre c'est que FireBug l'indique sous l'onglet style...mais il n'est pas affiché...

Je dois faire quoi? il y a une autre valeur à indiquer? une épaisseur? enlever quelque chose?

[Bobble]

j'ai finalement trouvé! une dure semaine de recherches....

j'ai pu déclarer ça dans mon fichier 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
16
17
18
19
20
21
22
23
24
.dr-table {
    border-collapse: separate;
    border-left: 1px solid;
    border-top: 1px solid;
    border-right: 1px solid;
    border-bottom: 1px solid;    
}
 
 
.dr-table-headercell {
    border-left: 1px solid;
    border-top: 1px solid;
    border-right: 1px solid;
    border-bottom: 1px solid;   
    padding: 2px;
}
 
.dr-table-cell {
    border-left: 0;
    border-top: 0;
    border-right: 0;
    border-bottom: 0;   
    padding: 2px;
}

en fait, ça écrase les styles par default déclarés avec les même noms.
Voilà, merci Sniper37! sans FireBug je n'aurais pas réussi!

[Bobble]

ah,
j'oubliais le plus important...
la déclaration de la table:

Code :

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

1
2
3
4
5
6
7
8
9
<rich:dataTable	cellspacing= "2"
	cellpadding= "2"
	var="tt" value="#{ta.receivedTT}" id="ttList1"		
	styleClass="standardTable" 
	style="width:101%"
	headerClass="standardTable_Header"
	footerClass="standardTable_Header"
	rowClasses="standardTable_Row1,standardTable_Row2"
	columnClasses="">

c'est cellspacing qui permet l'espace entre les lignes. Mais ça fonctionne seulement si on met "border-collapse: separate;" dans le style

[Sniper37]

Normalement tu ne dois pas changer les classes dr-**.
ça fonctionne ,mais si tu veux utiliser les skins, tu risque d'avoir un souci ..
si tu veux approfondir, en generale les classes à changer..sont prefixés par rich-xxx.

[Bobble]

ok!
merci!!!