Aide width dataTable avec primefaces 3.4

Version imprimable

Bonjour,

Je voudrais savoir s'il vous plait sur comment peut-on sélectionner le width d'une colonne dans ma dataTable. j'ai utilisé l'attribut width mais ça marche pas

voici mon code:
Code:

1 2 3 4 5 6 <p:dataTable id="annDatatable" var="annonces" value="#{adminCtr.listannonces}" > <p:column headerText="Description detaillé" width="2"> <h:outputText value="#{annonces.bigdescription}" /> </p:column> </p:dataTable>
sachant que bigdescription est un texte et donc lorsque j'excute ma page je trouve que mon texte et affiché sur une seule ligne avec un scroll horizontal.Je voudrais bien fixé le texte qu'il soit affiché sur multiples ligne et donc le width de la colonne je pense.
Merci

16/03/2014, 19h11
Stessy
Bonjour,

le mieux à faire est de redéfinir le style.

Ajouter la stylesheet dans le <h:head>

Code:

<h:outputStylesheet name="path_to_the_css/your_cssFile.css" />

Ne pas utiliser le <h:outputText> qui est un <span>
Code:

1 2 3 4 <p:column headerText="Description detaillé"> #{annonces.bigdescription} </p:column>
Ajouter le styleClass à la colonne

Code:

<p:column headerText="Description detaillé" styleClass="wrapText">

et redéfinir le style de la colonne dans le css.
Code:

1 2 3 4 .ui-datatable tbody td.wrapText { width: 200px; white-space: normal; }
Par défaut le ".ui-datatable tbody td" a une propriété "white-space: nowrap"

Je pense que cela devrait résoudre le problème.

Non ça marche pas j'ai fait ce ci

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">
 
 
<h:head>
 
<h:outputStylesheet name="./css/dataTable.css" />
 
</h:head>
 
 
 
<body>
 
	<h:form id="form3">
		<p:messages id="ann" />
 
		<p:dataTable id="annoncesDatatable" var="annonces"
			value="#{adminCtr.listannonces}" >
			<p:column headerText="Description detaillé"  styleClass="wrapText">
 
				#{annonces.bigdescription}
			</p:column>
		</p:dataTable>
 
 
 
 
 
 
	</h:form>
 
 
</body>
</html>

et dataTable.css

Code:

1
2
3
4
5
@CHARSET "ISO-8859-1";
.ui-datatable tbody td.wrapText {
	width: 200px;
    white-space: normal;
}

16/03/2014, 20h57
Stessy
Vérifier en débuggant la page via firebug ou autre si la css a bien été prise en compte.

Pouvez-vous vérifier si il n'existe pas un <div> ayant un class "div.ui-dt-c" dans votre version dans le code source de la page?

Si oui alors il faudrait modifier la css
Code:

1 2 3 4 .ui-datatable tbody td.wrapText div.ui-dt-c{ width: 200px; white-space: normal; }
Dans la version que j'utilise qui est la 4.0 il n'y a pas ce <div> supplémentaire. Mais peut-être que dans la 3.4 il y est toujours.
16/03/2014, 21h15
ahmedpa
J'ai changé le css comme vous m'avez mentionnée
Code:

1 2 3 4 5 @CHARSET "ISO-8859-1"; .ui-datatable tbody td.wrapText div.ui-dt-c { width: 100px; white-space: normal; }
Mais toujours rien sinon le css es affiché dans le navigateur en examinant l'élément

Bonjour,

Essaie

Code:

1
2
3
<p:column headerText="Description detaillé" style="width: 20px" >
				<h:outputText value="#{annonces.bigdescription}" />
			</p:column>

17/03/2014, 17h19
ahmedpa

ça donne rien aussi ! :s