Aide width dataTable avec primefaces 3.4

**ahmedpa** · 16/03/2014, 14h56

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 :

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

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

**Stessy** · 16/03/2014, 20h11

Bonjour,

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

Ajouter la stylesheet dans le <h:head>

Code html :

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

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

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

Code html :

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

1
2
3
4
 
<p:column headerText="Description detaillé">
				#{annonces.bigdescription}
			</p:column>

Ajouter le styleClass à la colonne

Code html :

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

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

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

Code css :

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

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.

**ahmedpa** · 16/03/2014, 20h23

Non ça marche pas j'ai fait ce ci

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

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

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

**Stessy** · 16/03/2014, 21h57

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

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

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.

**ahmedpa** · 16/03/2014, 22h15

J'ai changé le css comme vous m'avez mentionnée

Code :

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

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

**Mishulyna** · 17/03/2014, 17h28

Bonjour,

Essaie

Code :

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

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

Aide width dataTable avec primefaces 3.4

JSF Java

Vue hybride

Discussions similaires

Partager

Partager