Tableau, feuille de style, etc

Version imprimable

23/06/2009, 10h23
FunkyBreizh

Tableau, feuille de style, etc

Bonjour,

J'ai regardé beaucoup de topics et impossible de trouver la solution appropriée.

J'ai un rich:dataTable et j'aimerai pouvoir modifier la taille des colonne et la hauteur des lignes. En effet j'ai un tableau avec des actions de ce type:

http://livedemo.exadel.com/richfaces...ble&cid=569672

et mes icônes dans la colonne Actions ne sont pas aligné mais positionné les uns en dessous des autres. Ce qui donne des lignes avec une grande hauteur.

De plus j'essaye de mettre des css dans des feuilles de style a part, et la aussi, c'est impossible. Mes pages sont en xHTML, pas en JSP.

Merci,
23/06/2009, 10h36
Sniper37

ça dépend du width donné à la table, et celui donnée aux colonnes,
tu peux rencontrer ce problème avec n'importe quelle table html.
23/06/2009, 10h57
FunkyBreizh

Bah justement, je ne donne pas de width, je voudrai faire tous cas dans les css
23/06/2009, 11h05
Sniper37

un exemple de ce que tu fais?

Voila, c'est un tableau tous con, avec des icones dans la dernière colonnes, pour pouvoir éditer, supprimer des lignes.

Maintenant, j'aimerai avoir une feuille de style (a part) et la dedans pouvoir configurer la hauteur de mes ligne, la largeur de mes colonnes. Je ne veux pas le faire dans mon xHTML pour des raisons de lisibilités.

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
 
	<rich:dataTable id="usersDataTable" rowKeyVar="row"
		value="#{usersDataTableBean.usersList}" var="user"
		onRowMouseOver="this.style.backgroundColor='#F1F1F1'"
		onRowMouseOut="this.style.backgroundColor='#{a4jSkin.tableBackgroundColor}'">
		<f:facet name="header">
			<rich:columnGroup>
				<rich:column>
					<h:outputText styleClass="headerText" value="#{msg.login}" />
				</rich:column>
				<rich:column>
					<h:outputText styleClass="headerText" value="#{msg.firstname}" />
				</rich:column>
				<rich:column>
					<h:outputText styleClass="headerText" value="#{msg.lastname}" />
				</rich:column>
				<rich:column>
					<h:outputText styleClass="headerText" value="#{msg.mail}" />
				</rich:column>
				<rich:column>
					<h:outputText styleClass="headerText" value="#{msg.phone}" />
				</rich:column>
				<rich:column>
					<h:outputText styleClass="headerText"
						value="#{msg.remainTime} (en mn)" />
				</rich:column>
				<rich:column />
			</rich:columnGroup>
		</f:facet>
 
		<rich:column filterBy="#{user.login}" filterEvent="onkeyup">
			<h:outputText value="#{user.login}" />
			<f:facet name="footer">
				<h:outputText value="Total" />
			</f:facet>
		</rich:column>
		<rich:column filterBy="#{user.usersDatas.lastname}"
			filterEvent="onkeyup">
			<h:outputText value="#{user.usersDatas.lastname}" />
		</rich:column>
		<rich:column filterBy="#{user.usersDatas.firstname}"
			filterEvent="onkeyup">
			<h:outputText value="#{user.usersDatas.firstname}" />
		</rich:column>
		<rich:column filterBy="#{user.usersDatas.mail}" filterEvent="onkeyup">
			<h:outputText value="#{user.usersDatas.mail}" />
		</rich:column>
		<rich:column filterBy="#{user.usersDatas.phone}" filterEvent="onkeyup">
			<h:outputText value="#{user.usersDatas.phone}" />
		</rich:column>
		<rich:column>
			<h:outputText value="#{user.usersDatas.remainTime}" />
			<f:facet name="footer">
				<h:outputText id="totalTimeOutput"
					value="#{usersDataTableBean.totalTime}" />
			</f:facet>
		</rich:column>
		<rich:column>
			<a4j:commandLink ajaxSingle="true" id="historyLink"
				reRender="historyTable"
				oncomplete="Richfaces.showModalPanel('historyPanel');">
				<h:graphicImage value="/pages/images/passed.gif" style="border:0" />
				<f:setPropertyActionListener value="#{user}"
					target="#{historyDataTableBean.user}" />
			</a4j:commandLink>
			<a4j:commandLink ajaxSingle="true" id="editUserLink"
				oncomplete="Richfaces.showModalPanel('editUserPanel');"
				reRender="userInputForm">
				<h:graphicImage value="/pages/images/edit.gif" style="border:0" />
				<f:setPropertyActionListener value="#{user}"
					target="#{usersFormBean.editUser}" />
			</a4j:commandLink>
			<a4j:commandLink ajaxSingle="true" id="deleteUserLink"
				reRender="usersDataTable, creditTable, requestsTable"
				action="#{usersDataTableBean.deleteUser}">
				<h:graphicImage value="/pages/images/delete.gif" style="border:0" />
			</a4j:commandLink>
		</rich:column>
	</rich:dataTable>

Pour montrer un autre problème que je peux avoir :

Ci-dessous j'ai une grille, dans la troisième colonne doit s'afficher les messages d'erreurs quand le formulaire n'est pas bien rempli. Le problème c'est que le texte s'affiche mais les mots sont les un en dessous des autres. Moi je voudrai que mon modalPanel dans lequel ce situe le formulaire, s'agrandisse horizontalement et ke le message soit sur une ligne. J'ai essayer de bloquer la hauteur des lignes du Grid, mais ça ne fait rien.
J'ai vraiment du mal avec les CSS...

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
 
<style>
.row { heigth:20px;
}
</style>
	<h:form id="packInputForm">
		<h:panelGrid columns="3" rowClasses="row">
			<h:outputText value="#{msg.id_pack} : " />
			<h:inputText id="idInput" value="#{packsFormBean.editPack.id}">
				<rich:beanValidator summary="Invalid id" />
				<rich:ajaxValidator event="onblur" />
			</h:inputText>
			<rich:message for="idInput" />
 
			<h:outputText value="#{msg.pack_entitle} : " />
			<h:inputTextarea id="entitleInput"
				value="#{packsFormBean.editPack.entitle}">
				<rich:beanValidator summary="Invalid entitle" />
				<rich:ajaxValidator event="onblur" />
			</h:inputTextarea>
			<rich:message for="entitleInput" />
 
			<h:outputText value="#{msg.price} : " />
			<h:inputText id="priceInput" value="#{packsFormBean.editPack.price}">
				<rich:beanValidator summary="Invalid price" />
				<rich:ajaxValidator event="onblur" />
			</h:inputText>
			<rich:message for="priceInput" />
 
			<h:outputText value="#{msg.length} : " />
			<h:inputText id="lengthInput"
				value="#{packsFormBean.editPack.length}">
				<rich:beanValidator summary="Invalid length" />
				<rich:ajaxValidator event="onblur" />
			</h:inputText>
			<rich:message for="lengthInput" />
		</h:panelGrid>
		<a4j:commandButton action="#{packsFormBean.addPack}" value="Valider" 
			reRender="packsTable" />
	</h:form>