[Struts-Layout] layout:DynMenu

Version imprimable

23/06/2008, 10h34
gargantua

[Struts-Layout] layout:DynMenu

Bonjour à tous,

j'utilise un DynMenu dans mon application Web, et pas de problème tout marche.

Mais j'ai un bug d'affichage lorsque le menu déroulant passe dessus un composant "comboBox" d'une de mes pages, le composants est affiché en premier plan, ce qui est donc très génant.

Pas de problème noté avec des autres composants de type TextField & Cie.

Je n'ai rien trouvé à ce sujet, et débute totalement sous Struts.

Pouvez-vous m'aider ?

Merci

edit : je viens de faire le test sous firefox 3, pas de problème.
Là j'installe IE 7 pour voir.
Je testais sur IE 6 jusqu'à présent, mais c'est une contrainte, donc je n'ai pas le choix.
23/06/2008, 13h34
karement

j'ai déjà eu ce genre de petits soucis et je me suis tourné vers les css avec l'attribut z-index.

Et au pire, tu désactives tes combobox (tu les met en hidden tant que tu es sur le menu)
23/06/2008, 13h55
gargantua

Citation:

Envoyé par karement

j'ai déjà eu ce genre de petits soucis et je me suis tourné vers les css avec l'attribut z-index.

Et au pire, tu désactives tes combobox (tu les met en hidden tant que tu es sur le menu)

J'étais en train d'étudier les z-index moi aussi.

Mais c'est le gros bordel, j'ai du mal a m'y retrouver (pas moi qui ai coder l'application), surtout que je n'ai jamais touché a struts et ses layout.

Mais je vais donc continuer ma recherche sur cette voix.

Merci

Bon,

je n'arrive pas à trouver la solution...

J'ai trouvé un fichier HM_Loader.js qui fait le lien vers HM_ScriptDOM.js et défini un certain nombre de chose pour le style.

Les éléments de mon y menu reçoivent un z-index égale à 5000.

Je ne crois pas que pour le reste de ma page (qui est dans un gros div) il y ai de z-index précisé, ce que j'ai essayer de faire sans succès.

J'ai installé 2 plugin, 1 sous firefox et un autre sous IE, qui me permette de visualiser le style détaillé de la page visitée.

FireBug ss firefox me donne une structure suivante :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <html lang="fr"> <head> </head> <body marginwidth="0" marginheight="0" width="1000" topmargin="0" leftmargin="0"> <div id="FWTableContainerPP"> </div> <div id="HM_Menu1" style="border: 0pt solid rgb(0, 0, 0); overflow: hidden; position: absolute; visibility: visible; left: 30px; top: 75px; width: 300px; z-index: 5000; cursor: default; height: 22px;"> </div> <div id="HM_Menu1_1" style="border: 0pt solid rgb(0, 0, 0); overflow: hidden; position: absolute; visibility: hidden; left: 30px; top: 97px; width: 150px; z-index: 5000; cursor: default; height: 44px;"> </div> <div id="HM_Menu1_2" style="border: 0pt solid rgb(0, 0, 0); overflow: hidden; position: absolute; visibility: hidden; left: 180px; top: 97px; width: 150px; z-index: 5000; cursor: default; height: 98px;"> </div> </body> </html>
Le premier div avec id=FWTableContainerPP est le div qui contient ma page.
c'est à FWTableContainerPP que j'ai essayer de mettre un z-index=1 ou d'autre valeur sans succès.

Le plugin DebugBar sous IE lui ne m'affiche que le premier DIV...mais ça vient peut-etre du plugin, le menu fonctionnant mis a part le bug d'affichage...

Bref, je commence a perde espoir :aie:

edit : en editant le DOM.js j'ai bien pu constater l'impact sur les z-index du menu. J'ai testé la valeur -1, ce qui a pour effet d'afficher le menu "dessous" la page (donc on ne voit rien), ce qui marche sur firefox et ie.
Des que je repasse a 0 ou +, firefox m'affiche le menu correctement, ie non...

23/06/2008, 16h59
karement

le problème ne se situe pas sur les div mais sur les éléments eux-mêmes. il faut spécifié le z-index dessus.
Quel est le type de ta combo-box? si c'est un <input type="select"> sous i-e c'est mort car le "select" est un élément particulier qu passe par dessus n'importe quel élément=> la seule solution c'est de faire disparaître les sélects pendant la sélection.

tu peux joindre un petit screenshot, on se rendra mieux compte du problème.
24/06/2008, 09h37
gargantua

C'est effectivement un <input type="select"> ...

Bon, et bien au moins je connais la solution maintenant...!

Merci de ton aide.

en javascript tu fais comme ça:

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
 
/* SHOW/HIDE SELECT */
 
/**
 * Hide all select elements in the page
 */
function hideSelects() {
	oSelects = document.getElementsByTagName('SELECT');
	if (oSelects.length > 0) {
		for (i = 0; i < oSelects.length; i++) {
			oSelects[i].style.visibility = 'hidden';
		}
	}
}
 
/**
 * Display all select elements in the page
 */
function showSelects()
{
	oSelects = document.getElementsByTagName('SELECT');
	if (oSelects.length > 0) {
		for (i = 0; i < oSelects.length; i++) {
			if (oSelects[i] != null) {
				oSelects[i].style.visibility = 'visible';
			}
		}
	}
}

il ne te reste plus qu'à appeler les "event" du type "on click",... etc

26/06/2008, 15h09
gargantua

Citation:

Envoyé par karement

en javascript tu fais comme ça:
...
[/code]

il ne te reste plus qu'à appeler les "event" du type "on click",... etc

Merci, mais le problème c'est que je ne sais pas comment intercepter l'évenement sur un <layout:menuItem>...

il y a bien le propriété "action", mais ça attend une action struts.

Je débute avec struts donc je me trompe peut-être mais je ne crois pas que ce soit possible ?

EDIT :

Alors en fait en cherchant un peu je suis tombé sur un fichier de javascript utilisé pour le menu par struts, donc j'y ai inclus tes 2 fonctions (qui marchent parfaitement) et j'ai réussi à trouver la bonne fonction pour trouver le moment où les appeler!

Bref, ça marche! C'est un peu perturbant pour l'utilisateur mais c'est mieux que le bug.

Si le champ select et disable, est-ce qu'il apparaitrait par dessus les éléments aussi?
J'aimerai essayer mais je ne connais rien en javascript.

Je vais chercher en attendant..

Merci pour tout!!!

Edit 2 : apres quelque recherche j'ai trouvé pour mettre le champ disable, mais l'élément s'affiche tout de même par dessus.
L'idéal aurait été de pouvoir cacher que les SELECT recouvert mais alors là je ne vois pas comment je pourrais le detecter.

Bref, je garde la solution de tous les cacher.

Merci encore!