[ICEFACES][Datatable width:100%] largeur de la datatable dépasse la largeur du screen

**Esil2008** · 05/09/2008, 13h05

Configuration :
Windows XP
Icefaces 7.1.1
Eclipse WTP 3.2
Tomcat
Test using FireFox 3 & IE 7
"Je dispose de deux écrans pour mon PC"

J'ai un problème d'affichage lié au composant DataTable

Ma vue contient une datatable de 25 colonnes (les 25 col c'est juste pour vous montrez mon problème)
Quand le nombre de colonnes dépasse la largeur de l'écran, la datatable dépasse l'écran !
Vous pouvez voir la capture ci joint
Moi je voudrais que la datatable soit toujours à l'intérieur de la fenêtre et si jamais sa largeur dépasse, un ascenseur est crée pour empêcher ce dépassement (un ascenseur pour la datatable et non pas pour toute la fenêtre).

Voila le code de ma JSPX

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
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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
 
<?xml version='1.0' encoding='UTF-8'?>
<jsp:root jsfc="f:view" xmlns:jsp="http://java.sun.com/JSP/Page" version="2.0" xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core" xmlns:ice="http://www.icesoft.com/icefaces/component">
  <f:view>
    <ice:outputDeclaration doctypeRoot="HTML" doctypePublic="-//W3C//DTD XHTML 1.0 Transitional//EN"
    doctypeSystem="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" />
 
   <ice:outputHtml id="outputHtml1">
 
      <ice:outputHead>
        <!-- <link href="./xmlhttp/css/xp/xp.css" rel="stylesheet" type="text/css" /> -->
		<ice:outputStyle id="outputStyle2" href="./xmlhttp/css/xp/xp.css"/>
        <link rel='stylesheet' type='text/css' href='../css/style.css' />
 
      </ice:outputHead>
	  <ice:outputBody style="background-color: #A9A9AB; font-size:0.9em; " id="mybody">
		<!-- ============================== PANEL Group de la dataTable ========== -->
          <ice:panelGroup style="height : 500px; 
								overflow: auto  ;
								width : 100%; ">
           <ice:form id="formTopBouton">
            <ice:dataTable value="#{orderBook.rowDataModel}" var="order" id="table" rows="15" width="width :100%;" 
            		scrollable="false" >
 
              <ice:column>
				<f:facet name="header">
                  <ice:outputText value="Test column" />
                </f:facet>
              </ice:column>
 
              <ice:column>
				<f:facet name="header">
                  <ice:outputText value="Test column" />
                </f:facet>
              </ice:column>
 
              <ice:column>
				<f:facet name="header">
                  <ice:outputText value="Test column" />
                </f:facet>
              </ice:column>
 
			  <ice:column>
				<f:facet name="header">
                  <ice:outputText value="Test column" />
                </f:facet>
              </ice:column>
 
              <ice:column>
				<f:facet name="header">
                  <ice:outputText value="Test column" />
                </f:facet>
              </ice:column>
 
              <ice:column>
				<f:facet name="header">
                  <ice:outputText value="Test column" />
                </f:facet>
              </ice:column>
 
              <ice:column>
				<f:facet name="header">
                 <ice:outputText value="Test column" />
                </f:facet>
              </ice:column>
 
              <ice:column>
				<f:facet name="header">
                  <ice:outputText value="Test column" />
                </f:facet>
              </ice:column>
 
              <ice:column>
				<f:facet name="header">
                  <ice:outputText value="Test column" />
                </f:facet>
              </ice:column>
 
              <ice:column>
				<f:facet name="header">
                 <ice:outputText value="Test column" />
                </f:facet>
              </ice:column>
 
              <ice:column>
				<f:facet name="header">
                  <ice:outputText value="Test column" />
                </f:facet>
              </ice:column>
 
              <ice:column>
				<f:facet name="header">
                 <ice:outputText value="Test column" />
                </f:facet>
              </ice:column>
 
              <ice:column>
				<f:facet name="header">
                  <ice:outputText value="Test column" />
                </f:facet>
              </ice:column>
 
              <ice:column>
				<f:facet name="header">
                  <ice:outputText value="Test column" />
                </f:facet>
              </ice:column>
 
              <ice:column>
				<f:facet name="header">
                  <ice:outputText value="Test column" />
                </f:facet>
              </ice:column>
 
              <ice:column>
				<f:facet name="header">
                  <ice:outputText value="Test column" />
                </f:facet>
              </ice:column>
 
              <ice:column>
				<f:facet name="header">
                 <ice:outputText value="Test column" />
                </f:facet>
              </ice:column>
 
              <ice:column>
				<f:facet name="header">
                  <ice:outputText value="Test column" />
                </f:facet>
              </ice:column>
 
                            <ice:column>
				<f:facet name="header">
                  <ice:outputText value="Test column" />
                </f:facet>
              </ice:column>
 
              <ice:column>
				<f:facet name="header">
                  <ice:outputText value="Test column" />
                </f:facet>
              </ice:column>
 
              <ice:column>
				<f:facet name="header">
                  <ice:outputText value="Test column" />
                </f:facet>
              </ice:column>
             <ice:column>
				<f:facet name="header">
                  <ice:outputText value="Test column" />
                </f:facet>
              </ice:column>
 
                            <ice:column>
				<f:facet name="header">
                  <ice:outputText value="Test column" />
                </f:facet>
              </ice:column>
 
              <ice:column>
				<f:facet name="header">
                  <ice:outputText value="Test column" />
                </f:facet>
              </ice:column>
 
              <ice:column>
				<f:facet name="header">
                  <ice:outputText value="Test column" />
                </f:facet>
              </ice:column>              
            </ice:dataTable>
 
			<!-- Paginator with page controls -->
 
 
        </ice:form>
      </ice:panelGroup>
 
		<!-- Static Tab Set -->
 
      </ice:outputBody>
    </ice:outputHtml>
  </f:view>
</jsp:root>

J'ai trouvé un astuce pour contourner cela mais ca marche seulement sous IE7 et non sur FF3 je crois que ca marche aussi sur FF2, mais c'est une mauvaise solution vu qu'elle n'est pas dynamique (-450)

Code :

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

1
2
3
4
5
6
7
<ice:panelGroup style="height : 500px; 
	      overflow: auto  ;
	      width : expression(document.body.clientWidth > 950  ? document.body.clientWidth-450+'px' : '950px' ); ">
 
<ice:dataTable
...
</ice:panelGroup>

Est ce que vous avez une idée pour contourner se problème ? Tout en ayant une largeur dynamique pour la table, pour quelle s'adapte en fonction de la résolution utilisée

Merci pour l'aide

**tchize_** · 05/09/2008, 13h35

met un div d'une largeur de 100% et avec un scrolling auto autour de la datatable. les tables html n'obéissent pas au "width" si il est impossible de caser toutes les colonnes. Par contre, le div le fait et si tu met overflow:scroll dans sont css, il affiche une barre de scroll.

**Esil2008** · 05/09/2008, 14h00

merci tchize_ pour le reply

Au fait le ice:panelgroup est en effet un div, quand on voit la source généré on voit bien que c'est div. Mais j'ai tout de même essayer de remplacer mon panelgroup par un div comme ça

Code :

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

1
2
3
4
<div style="height : 500px; 
		overflow: auto  ;
		width : 100%; 
                scrolling : auto;">

et aussi par

Code :

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

1
2
3
<div style="height : 500px; 
		width : 100%; 
                scrolling : auto;">

Mais ça marche malheureusement pas

**tchize_** · 05/09/2008, 16h26

petite subtilité en css. Pour que le width relatif fonctionne (100%, 69% ou autre), il faut obligatoirement que le conteneur au dessus aie une taille connue (soit relative, soit fixe). Le plus simple pour y arriver c'est d'ajouter à la balise <body> style="width:100%", c'est con, mais çà permet de mettre à l'intérieur après des div en taille relative :p

**Esil2008** · 05/09/2008, 16h41

salut

Je te remercie pour ton conseil concernant la subtilité CSS
J'ai essayé de faire la même chose chez moi

Code :

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

<ice:outputBody style="background-color: #A9A9AB; font-size:0.9em; width:100%;" id="mybody">

Mais ça marche pas.
Je suis presque sur que c'est un bug du composant datatable d'icefaces, car j'ai bon à essayer toute les solutions possibles et logiques sans résultat

. En plus ma vue est tellement simple qu'on aurait directement vu l'erreur que je fais !

Le workarround que j'ai mentionné plus haut marche aussi sous Opera et je il marchais avec la version 2 de FF et biensur IE mais voila je sais pq il marche pas sur FF3.

Ce bout de code marche sur des écrans 15' et aussi 19' mais est ce qu'il marchera sur des écrans plus grands, ça je sais pas (le -450 peut etre ne fonctionnera pas bien avec une certaine résolution)

**tchize_** · 05/09/2008, 18h18

tu peux poster la page html générée en attachement, qu'on joue avec?

[ICEFACES][Datatable width:100%] largeur de la datatable dépasse la largeur du screen

JSF Java

Vue hybride

Discussions similaires

Partager

Partager