Pas d'ascenseur sur mon site GWT

[sub_zero]

Salut tout le monde,

Voilà j'ai un gros problème, j'ai terminé mon site et même mis en ligne, tout fonctionne sauf ... l'ascenseur (le scrolleur). Donc si l'écran est plus petit que prévu, tout une partie de la page ne s'affiche pas !

Pourtant j'essaye de forcer l'affichage de l'ascenseur par un overflow: visible, ou overflow: auto dans la balise body ou html, mais ça ne marche pas.
avec un overflow: scroll, l'ascenseur s'affiche mais il est désactivé.

Mon site est fait d'images (banière) et de différents panels contenant du texte.

Une idée ?

[michel.di]

Salut,

Tu pourrais mettre un peu de code pour t'aider?

[sub_zero]

yo,

J'ai comme l'impression que les navigateurs interprètent la page comme si elle avait une largeur et une hauteur de 0, puisque finalement il n'y a que des containers JavaScript avec du texte dedans ?

Voici le code que j'ai épuré (les panels peuvent contenir des objets html et/ou des images) :

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
 
public void onModuleLoad() {
 
		Image banier = new Image("images/banierehaut.gif");
		Image banier2 = new Image("images/banierebas.jpg");
 
		String[] tabTitles = new String[2];
		tabTitles[0] = "Accueil";
		tabTitles[1] = "Formation";
 
		TabLayoutPanel p = new TabLayoutPanel(1.8, Unit.EM);
 
		VerticalPanel accueil = new VerticalPanel();
		accueil.addStyleName("dimensionaccueil");
 
		HorizontalPanel hautaccueil = new HorizontalPanel();
		HorizontalPanel milieuaccueil = new HorizontalPanel();
		SimplePanel descriptionaccueil = new SimplePanel();
 
		HorizontalPanel contenantaccueil = new HorizontalPanel();
		contenantaccueil.setSpacing(25);
 
		HorizontalPanel contientaccueil = new HorizontalPanel();
		contientaccueil.addStyleName("stylecontenants");
 
		accueil.add(hautaccueil);
		accueil.add(milieuaccueil);
		accueil.add(descriptionaccueil);
		contenantaccueil.add(accueil);
 
		contientaccueil.add(contenantaccueil);
 
		p.add(contientaccueil, tabTitles[0]);
 
		VerticalPanel exps = new VerticalPanel();
 
		VerticalPanel exp_info = new VerticalPanel();
		exp_info.setSpacing(9);
 
		SimplePanel exp_alst = new SimplePanel();
		exp_alst.addStyleName("vpanelintexpsinf");
 
		SimplePanel exp_cli = new SimplePanel();
		exp_cli.addStyleName("vpanelintexpsinf");
 
		exp_info.add(exp_alst);
		exp_info.add(exp_cli);
 
		exps.add(exp_info);
 
		p.add(exps, tabTitles[1]);
 
		p.selectTab(0);
 
		DockLayoutPanel dlp = new DockLayoutPanel(Unit.EM);
		dlp.addStyleName("center");
		dlp.addStyleName("width");
		dlp.addNorth(banier, 5);
		dlp.addSouth(banier2, 4);
		dlp.add(p);
 
		RootLayoutPanel rp = RootLayoutPanel.get();
		rp.add(dlp);    
	}
}

[sub_zero]

Les styles CSS utilisés ci-dessus (mais je ne pense pas que cela ait quoi que ce soit à voir avec le problème) :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
.dimensionaccueil {
	Width: 500px;
	Height: 400px;
}
 
.stylecontenants {
	Width: 1000px;
	Height: 800px;
}
 
.vpanelintexpsinf {
	Width: 945px;
}
 
.width {
     Width: 1000px;
}
 
.center {
      Margin-left : auto;
      Margin-right : auto;
}

[karbos]

Si tu rajoutes

Code :

overflow: auto;

dans ta classe .center de ton CSS ?

[karbos]

Ou encore :

Code :

dlp.getElement().getParentElement().getParentElement().getStyle().setOverflow(Overflow.VISIBLE);

dans ton code Java ?

[sub_zero]

Envoyé par karbos

Ou encore :

Code :

dlp.getElement().getParentElement().getParentElement().getStyle().setOverflow(Overflow.VISIBLE);

dans ton code Java ?

Merci pour ta réponse.
J'ai ajouté 'overflow: auto' dans la classe .center ==> pas de changement

J'ai essayé 'dlp.getElement().getParentElement().getParentElement().getStyle().setOverflow(Overflow.VISIBLE);' et j'ai l'exception suivante :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
com.google.gwt.core.client.JavaScriptException: (TypeError): node is null
    at com.google.gwt.dev.shell.BrowserChannelServer.invokeJavascript(BrowserChannelServer.java:248)
    at com.google.gwt.dev.shell.ModuleSpaceOOPHM.doInvoke(ModuleSpaceOOPHM.java:136)
    at com.google.gwt.dev.shell.ModuleSpace.invokeNative(ModuleSpace.java:561)
    at com.google.gwt.dev.shell.ModuleSpace.invokeNativeObject(ModuleSpace.java:269)
    at com.google.gwt.dev.shell.JavaScriptHost.invokeNativeObject(JavaScriptHost.java:91)
    at com.google.gwt.dom.client.DOMImpl.getParentElement(DOMImpl.java)
    at com.google.gwt.dom.client.Node$.getParentElement$(Node.java:190)
    at com.client.Cv.onModuleLoad(Cv.java:530)
    at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
    at sun.reflect.NativeMethodAccessorImpl.invoke(Unknown Source)
    at sun.reflect.DelegatingMethodAccessorImpl.invoke(Unknown Source)
    at java.lang.reflect.Method.invoke(Unknown Source)
    at com.google.gwt.dev.shell.ModuleSpace.onLoad(ModuleSpace.java:396)
    at com.google.gwt.dev.shell.OophmSessionHandler.loadModule(OophmSessionHandler.java:200)
    at com.google.gwt.dev.shell.BrowserChannelServer.processConnection(BrowserChannelServer.java:525)
    at com.google.gwt.dev.shell.BrowserChannelServer.run(BrowserChannelServer.java:363)
    at java.lang.Thread.run(Unknown Source)

J'ai essayé aussi : 'dlp.getElement().getParentElement().getStyle().setOverflow(Overflow.VISIBLE);' et là pas d'exception, mais pas de changement non plus (je pense que getParentElement().getParentElement() fait référence à la fenêtre HTML ?

[karbos]

Envoyé par sub_zero

J'ai essayé aussi : 'dlp.getElement().getParentElement().getStyle().setOverflow(Overflow.VISIBLE);' et là pas d'exception, mais pas de changement non plus (je pense que getParentElement().getParentElement() fait référence à la fenêtre HTML ?

Ben oui, à ta place je tâtonnerais jusqu'à trouver le bon...
Tu as essayé de debuguer avec FireBug ? voir si le paramètre overflow:auto est bien pris en compte et voir si les composants à l'intérieur de la div qui reçoit le paramètre overflow:auto ont bien des dimensions correctes ?

[sub_zero]

Envoyé par karbos

Ben oui, à ta place je tâtonnerais jusqu'à trouver le bon...
Tu as essayé de debuguer avec FireBug ? voir si le paramètre overflow:auto est bien pris en compte et voir si les composants à l'intérieur de la div qui reçoit le paramètre overflow:auto ont bien des dimensions correctes ?

J'ai pas tenté de débogage mais j'ai essayé pas mal de solutions pour afficher l'ascenseur, mais il reste inactif, sauf pour l'ascenseur horizontal mais qui ne se déclenche pas à l'endroit attendu ..

Je pense que ça vient de TabLayoutPanel car si je prend l'exemple du showCase de GWT sur le TabLayoutPanel et que j'insère une image de 345 x 420 pixels dans un des des deux onglets, lorsque je réduit la résolution de mon écran (Ctrl + molette et/ou via les propriétés de l'affichage écran) ==> je n'ai pas d'ascenseur vertical : l'image devient tronquée. Par contre, j'ai quand même l'ascenseur horizontal.

Je commence à me demander si ce n'est pas plutôt un bug gwt ...

Voici le code simplissime qui montre qu'on a pas d'ascenseur vertical :

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
 
public void onModuleLoad() {
 
		String[] tabTitles = new String[2];
		tabTitles[0] = "Accueil";
		tabTitles[1] = "Logo GWT";
 
		TabLayoutPanel p = new TabLayoutPanel(1.5, Unit.EM);
 
		 SimplePanel contenantHomeText = new SimplePanel();
 
		 HTML homeText = new HTML("Cliquez sur l'un des onglets pour afficher du contenu suppl&eacute;mentaire.<br>");
 
		 contenantHomeText.add(homeText);
		 p.add(contenantHomeText, tabTitles[0]);
 
		 Image img = new Image("images/image345x420.jpg");
 
		 p.add(img, tabTitles[1]);
		 p.selectTab(0);
 
		 RootLayoutPanel rp = RootLayoutPanel.get();
		 rp.add(p);
		 RootPanel.get().add(rp);
	}
}

Par curiosité je suis allé sur le ShowCase de GWT, j'ai ouvert leur page sur l'exemple du TabLayoutPanel que l'on trouve ici (rubrique : Panneaux/ disposition du panneau Tab) : http://gwt.google.com/samples/Showca...utPanelhttp://

Et bien si j'abaisse la résolution de mon écran comme expliqué précédemment j'ai pas d'ascenseur non plus : je ne peux plus voir tous leurs onglets .
Je ne pense pas que ça vienne de mon navigateur ou PC puisque je n'ai pas ce problème sur d'autres sites ...
ça veut dire que leur page peut ne pas être entièrement visible sur un smartphone, par exemple, et ça c'est un sérieux problème ...

[sub_zero]

Du nouveau :

Le problème se pose sous Firefox, mais pas sous Internet Explorer !

Attention ! je parle non seulement pour mon site, mais même pour le site de gwt.google en personne !!! (page sur la disposition des panneaux Tab). Et je viens de vérifier sur un autre PC chez un ami, c'est pareil.

Avec Firefox, il n'y ni ascenseur vertical, ni ascenseur horizontal lorsqu'on baisse la résolution de l'écran ou lorsqu'on essaye de zoomer, une partie de la page est alors tronquée !!! Par contre avec Internet Explorer, ça marche.

Pour moi c'est un bug provoqué par l'utilisation de l'objet TabLayoutPanel avec Firefox, et il me semble que ça pose un sacré problème pour l'utilisation de GWT...

Merci de vos avis, si vous avez IE et Firefox, vous pouvez facilement vérifier

[karbos]

Envoyé par sub_zero

Le problème se pose sous Firefox, mais pas sous Internet Explorer !

Attention ! je parle non seulement pour mon site, mais même pour le site de gwt.google en personne !!! (page sur la disposition des panneaux Tab). Et je viens de vérifier sur un autre PC chez un ami, c'est pareil.

Normal: le codde du CSS spécifie "overflow: hidden;". Donc en fait, ça marche sous Firefox et pas sous IE
Il faudrait que tu regardes un peu le code généré dans ton cas pour voir où GWT pose son "overflow: hidden;"... Je ne peux pas plus t'aider puisque je n'ai pas la totalité de ton projet. Si tu trouves cet attribut, c'est gagné : il te suffit de forcer la valeur à "auto".
Mais c'est peut-être plus compliqué si tu as un chargement différé de données dans une div... car la div reçoit une dimension au chargement de l'application et sa dimension n'est pas modifiée après le chargement des données ! Dans ce cas il faut jouer avec les événements et la méthode "forceLayout()"...

[sub_zero]

Envoyé par karbos

Normal: le codde du CSS spécifie "overflow: hidden;". Donc en fait, ça marche sous Firefox et pas sous IE
Il faudrait que tu regardes un peu le code généré dans ton cas pour voir où GWT pose son "overflow: hidden;"... Je ne peux pas plus t'aider puisque je n'ai pas la totalité de ton projet. Si tu trouves cet attribut, c'est gagné : il te suffit de forcer la valeur à "auto".
Mais c'est peut-être plus compliqué si tu as un chargement différé de données dans une div... car la div reçoit une dimension au chargement de l'application et sa dimension n'est pas modifiée après le chargement des données ! Dans ce cas il faut jouer avec les événements et la méthode "forceLayout()"...

ok je vais chercher dans cette direction. merci

[sub_zero]

Envoyé par karbos

Je ne peux pas plus t'aider puisque je n'ai pas la totalité de ton projet. Si tu trouves cet attribut, c'est gagné : il te suffit de forcer la valeur à "auto".

Juste pour dire que si, tu as le code juste au-dessus, celui où je me suis contenté d'ajouter une image, il n'y a besoin de rien d'autre pour mettre en évidence le problème

[sub_zero]

J'ai regardé le code JavaScript généré : Dans le dossier war du WorkSpace, il y a un fichier hosted.html et en l'ouvrant j'ai trouvé la ligne suivante :
hostBodyStyle.overflow = "hidden"; j'ai passé la propriété à 'auto' et j'y ai vraiment cru, mais non ça n'a pas fonctionné, même après avoir vidé le cache du navigateur.

[sub_zero]

Bon la seule solution que j'ai trouvée pour l'instant c'est d'utiliser un TabPanel au lieu d'un TabLayoutPanel, les scrollbars s'affichent alors sans problème dès que nécessaire.

Selon moi ça reste un bug GWT pour l'objet TabLayoutPanel ...

[karbos]

TabPanel c'est obsolète depuis GWT2.x...
Je vais chercher un peu avec toi mais ça prend du temps
J'ai recopié ton code ds un petit projet et debuggé avec FireBug, et je vois le problème. C'est ça :

Code :

1
2
3
4
.gwt-TabLayoutPanel .gwt-TabLayoutPanelContent {
    overflow: hidden;
    padding: 6px;
}

[sub_zero]

D'abord merci d'avoir testé le code.

Je pense que le 'overflow: hidden;' pouvait effectivement se trouver dans un des fichiers de styles standard GWT, mais en fait, j'avais commenté tous les styles de GWT dans le fichier XML, donc il ne restait plus que mon fichier CSS.

Mais ... en regardant mon fichier CSS, j'ai vu qu'il y avait la propriété overflow:hidden pour l'objet gwt-TabLayoutPanelContent !!! ... certainement un reste de copier/coller qui m'avait échappé ... Alors j'ai remplacé la valeur par 'auto' et je me suis dit que cette fois, ça y est, et que j'allais encore me taper la honte sur le forum pour un truc aussi naz ... mais vla je teste et ... toujours pas de scrollbar.

Par contre sur l'exemple très simple que j'ai posté au-dessus, avec une image de 345x420, et bien j'ai retesté et la scrollbar est apparue ... pourtant pour ce projet je n'ai absolument rien changé au code et je suis formel, la dernière fois que j'avais testé, il n'y avait pas de scrollbar !!!

Si un jour j'arrive à trouver pourquoi je reviendrais sur le sujet ..

En tous cas merci, tu m'as bien aidé à explorer toutes les pistes.