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

Version imprimable

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:

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:

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

05/09/2008, 13h35
tchize_

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.
05/09/2008, 14h00
Esil2008
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:

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

1 2 3 <div style="height : 500px; width : 100%; scrolling : auto;">
Mais ça marche malheureusement pas
05/09/2008, 16h26
tchize_

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
05/09/2008, 16h41
Esil2008

salut

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

Code:

<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)
05/09/2008, 18h18
tchize_

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

Je suis désolé pour tout ce retard, j'avais pas internet ...

Voila la source générée en PJ.

Il y a un truc que j'avais pas préciser. C'est que la vue que j'avais poster avant est intégrée à un template qui a comme width 90%.
Au fait, l'application que je développe est un module d'une autre application. L'autre application propose un template dans lequel on doit intégré nos vues.

Le template en question c'est :

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
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
188
189
190
191
192
<?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:c="http://java.sun.com/jstl/core"
xmlns:ice="http://www.icesoft.com/icefaces/component" xmlns:ui="http://java.sun.com/jsf/facelets">
  <ice:outputDeclaration doctypeRoot="HTML" doctypePublic="-//W3C//DTD XHTML 1.0 Transitional//EN" doctypeSystem="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" />
 
  <html>
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      </meta>
 
      <title id="dynamicTitle">
        <ui:insert name="title">UL EXTRANET</ui:insert>
      </title>
 
      <link rel='stylesheet' type='text/css' href='${facesContext.externalContext.requestContextPath}/xmlhttp/css/rime/rime.css' />
 
      <link rel='stylesheet' type='text/css' href='${facesContext.externalContext.requestContextPath}/css/core.css' />
    </head>
 
    <body >
    <center>
      <div id="header" >
       <ice:panelGrid columns="2" cellpadding="0" cellspacing="0" styleClass="headerGrid">
        <ice:graphicImage url="/images/layout/logo.jpg" />
        </ice:panelGrid>
      </div>
 
      <ice:panelGrid columns="2" cellpadding="5" cellspacing="0" styleClass="layoutGrig" >
        <div id="menu">
          <ui:insert name="navigation">
            <ui:include src="navigation.jspx" />
          </ui:insert>
        </div>
 
        <div id="principal">
          <div class="principal2">
            <div class="haut">
              <div class="coingh">
                <div style="margin:0px 0px 0px 30px;">
                	<ui:insert name="page-header" />                	
               </div>    
              </div>
 
              <div class="coindh">              
              </div>
            </div>
 
            <div class="contenu" >              
                <ui:insert name="page-content" />
            </div>
 
            <div class="bas">
              <div class="coingb">
              </div>
 
              <div class="coindb">
              </div>
            </div>
          </div>
        </div>
      </ice:panelGrid>
</center>
 
       <!-- 
          PRELOAD IMAGES need for roleovers and layout in general, javascript is only
          loaded once per refresh which is good enough.  This improves overall user
          experience as they shouldn't have to wait for images to show up after the
          initial load.
          --> <script language="JavaScript" type="text/javascript">
            // <![CDATA[ 
            var preloaded = new Array();
            function preload_images() {
                for (var i = 0; i < arguments.length; i++) {
                    preloaded[i] = document.createElement('img');
                    preloaded[i].setAttribute('src', arguments[i]);
                }
            }
            preload_images(
                    './xmlhttp/css/rime/css-images/arrow-ff.gif',
                    './xmlhttp/css/rime/css-images/arrow-ff-dis.gif',
                    './xmlhttp/css/rime/css-images/arrow-first.gif',
                    './xmlhttp/css/rime/css-images/arrow-first-dis.gif',
                    './xmlhttp/css/rime/css-images/arrow-fr.gif',
                    './xmlhttp/css/rime/css-images/arrow-fr-dis.gif',
                    './xmlhttp/css/rime/css-images/arrow-last.gif',
                    './xmlhttp/css/rime/css-images/arrow-last-dis.gif',
                    './xmlhttp/css/rime/css-images/arrow-next.gif',
                    './xmlhttp/css/rime/css-images/arrow-next-dis.gif',
                    './xmlhttp/css/rime/css-images/arrow-previous.gif',
                    './xmlhttp/css/rime/css-images/arrow-previous-dis.gif',
                    './xmlhttp/css/rime/css-images/bottom_menu_bg.png',
                    './xmlhttp/css/rime/css-images/bottom_menu_btn_bg_on.png',
                    './xmlhttp/css/rime/css-images/bullet.gif',
                    './xmlhttp/css/rime/css-images/cal_arrow_left.gif',
                    './xmlhttp/css/rime/css-images/cal_arrow_left_dis.gif',
                    './xmlhttp/css/rime/css-images/cal_arrow_right.gif',
                    './xmlhttp/css/rime/css-images/cal_arrow_right_dis.gif',
                    './xmlhttp/css/rime/css-images/cal_button.gif',
                    './xmlhttp/css/rime/css-images/cal_off.gif',
                    './xmlhttp/css/rime/css-images/column_sort_asc.gif',
                    './xmlhttp/css/rime/css-images/column_sort_desc.gif',
                    './xmlhttp/css/rime/css-images/connect_active.gif',
                    './xmlhttp/css/rime/css-images/connect_caution.gif',
                    './xmlhttp/css/rime/css-images/connect_disconnected.gif',
                    './xmlhttp/css/rime/css-images/connect_idle.gif',
                    './xmlhttp/css/rime/css-images/contentContainer_bg.gif',
                    './xmlhttp/css/rime/css-images/contentContainer_bg_up.gif',
                    './xmlhttp/css/rime/css-images/off-left-bot.gif',
                    './xmlhttp/css/rime/css-images/off-left-top-dis.gif',
                    './xmlhttp/css/rime/css-images/off-mid-bot.gif',
                    './xmlhttp/css/rime/css-images/off-mid-top-dis.gif',
                    './xmlhttp/css/rime/css-images/off-right-bot.gif',
                    './xmlhttp/css/rime/css-images/off-right-top-dis.gif',
                    './xmlhttp/css/rime/css-images/PnlClpsblCnt_bullet.gif',
                    './xmlhttp/css/rime/css-images/PnlHdr_bgslice.gif',
                    './xmlhttp/css/rime/css-images/PnlHdr_collapsed.gif',
                    './xmlhttp/css/rime/css-images/PnlHdr_down.gif',
                    './xmlhttp/css/rime/css-images/ProgFill_bg.gif',
                    './xmlhttp/css/rime/css-images/ProgFill_Indet_Bg_active.gif',
                    './xmlhttp/css/rime/css-images/ProgFill_Indet_Bg_inactive.gif',
                    './xmlhttp/css/rime/css-images/Tab_Btm_LftBtm.gif',
                    './xmlhttp/css/rime/css-images/Tab_Btm_LftBtm_off.gif',
                    './xmlhttp/css/rime/css-images/Tab_Btm_LftMid.gif',
                    './xmlhttp/css/rime/css-images/Tab_Btm_LftMid_off.gif',
                    './xmlhttp/css/rime/css-images/Tab_Btm_MidBtm.gif',
                    './xmlhttp/css/rime/css-images/Tab_Btm_MidBtm_off.gif',
                    './xmlhttp/css/rime/css-images/Tab_Btm_MidMid.gif',
                    './xmlhttp/css/rime/css-images/Tab_Btm_MidMid_off.gif',
                    './xmlhttp/css/rime/css-images/Tab_Btm_RtBtm.gif',
                    './xmlhttp/css/rime/css-images/Tab_Btm_RtBtm_off.gif',
                    './xmlhttp/css/rime/css-images/Tab_Btm_RtMid.gif',
                    './xmlhttp/css/rime/css-images/Tab_Btm_RtMid_off.gif',
                    './xmlhttp/css/rime/css-images/Tab_LftMid.gif',
                    './xmlhttp/css/rime/css-images/Tab_LftMid_off.gif',
                    './xmlhttp/css/rime/css-images/Tab_LftTop.gif',
                    './xmlhttp/css/rime/css-images/Tab_LftTop_off.gif',
                    './xmlhttp/css/rime/css-images/Tab_MidMid.gif',
                    './xmlhttp/css/rime/css-images/Tab_MidMid_bullet.gif',
                    './xmlhttp/css/rime/css-images/Tab_MidMid_bullet_off.gif',
                    './xmlhttp/css/rime/css-images/Tab_MidMid_bullet_over.gif',
                    './xmlhttp/css/rime/css-images/Tab_MidMid_off.gif',
                    './xmlhttp/css/rime/css-images/Tab_MidTop.gif',
                    './xmlhttp/css/rime/css-images/Tab_MidTop_off.gif',
                    './xmlhttp/css/rime/css-images/Tab_RtMid.gif',
                    './xmlhttp/css/rime/css-images/Tab_RtMid_off.gif',
                    './xmlhttp/css/rime/css-images/Tab_RtTop.gif',
                    './xmlhttp/css/rime/css-images/Tab_RtTop_off.gif',
                    './xmlhttp/css/rime/css-images/table-border.gif',
                    './xmlhttp/css/rime/css-images/table_col_header.gif',
                    './xmlhttp/css/rime/css-images/theme_bg.gif',
                    './xmlhttp/css/rime/css-images/theme_change_bg.gif',
                    './xmlhttp/css/rime/css-images/tree_close.gif',
                    './xmlhttp/css/rime/css-images/tree_document.gif',
                    './xmlhttp/css/rime/css-images/tree_folder_closed.gif',
                    './xmlhttp/css/rime/css-images/tree_folder_doc.gif',
                    './xmlhttp/css/rime/css-images/tree_folder_open.gif',
                    './xmlhttp/css/rime/css-images/tree_line_blank.gif',
                    './xmlhttp/css/rime/css-images/tree_line_last_node.gif',
                    './xmlhttp/css/rime/css-images/tree_line_middle_node.gif',
                    './xmlhttp/css/rime/css-images/tree_line_vertical.gif',
                    './xmlhttp/css/rime/css-images/tree_nav_bottom_close.gif',
                    './xmlhttp/css/rime/css-images/tree_nav_bottom_open.gif',
                    './xmlhttp/css/rime/css-images/tree_nav_middle_close.gif',
                    './xmlhttp/css/rime/css-images/tree_nav_middle_open.gif',
                    './xmlhttp/css/rime/css-images/tree_nav_top_close.gif',
                    './xmlhttp/css/rime/css-images/tree_nav_top_close_no_siblings.gif',
                    './xmlhttp/css/rime/css-images/tree_nav_top_open.gif',
                    './xmlhttp/css/rime/css-images/tree_nav_top_open_no_siblings.gif',
                    './xmlhttp/css/rime/css-images/tree_open.gif',
 
                    './css/images/navigation-tree/tree_folder_closed.gif',
                    './css/images/navigation-tree/tree_folder_open.gif',
                    './css/images/navigation-tree/tree_node.gif',
                    './css/images/navigation-tree/tree_node_rollover.gif',
                    './css/images/navigation-tree/tree_node_selected.gif',
 
                    './images/panelStack/address-thumb.png',
                    './images/panelStack/auction-thumb.png',
                    './images/panelStack/mobility-thumb.png',
                    './images/panelStack/timezone-thumb.png'
 
                    );
                   // ]]>
              </script>
 
 
 
 
 
    </body>
  </html>
</jsp:root>

C'est ce qui explique le code en plus dans la source :)

Pour le rime.css c'est un fichier de style Icefaces utilisé par ces composants.
sinon pour les autres styles les voila :

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
.headerGrid {
	width: 90%;
}
 
.layoutGrig {
	width: 90%;
}
 
#menu {
	width: 200px;
	white-space: nowrap;
	overflow: hidden;
	background-color: transparent;
}
 
#principal {
	background-image: url('../images/layout/area_left.jpg');
	background-repeat: repeat-y;
	background-color: #0284C;
}
 
#principalMenu {
	width: 200px;
	background-image: url('../images/layout/area_left.jpg');
	background-repeat: repeat-y;
	background-color: #0284C;
}
 
.principal2 {
	background-image: url('../images/layout/area_left.jpg');
	background-repeat: repeat-y;
	background-position: right;
}
 
 
.contenu {
	margin: 0 30px 0 30px;
	background-color: #00284C;
	color: white;
	white-space: nowrap;
	overflow: hidden;
	height: 650px;
	min-width: 500px;
}
 
Les autres ne sont pas tres important

Merci beaucoup

10/09/2008, 20h05
tchize_

inutile d'essayer de corriger ton css pour le moment, ton html n'est pas valide! je vois des balises head et body en plein milieu du html! corriige d'abord çà avant de jouer avec le css. Les browsers vont avoir du mal à appliquer correctement le css si les tags sont mélangés n'importe comment!
11/09/2008, 11h21
Esil2008

Ok je crois savoir pourquoi il y a ce mélange. Je vais essayer de régler cela pourvu que ça marche

merci