Discussion :

[Hanoni]

Bonjour à tous,

alors voilà mon souci...ça fait un petit moment que je retourne le problème dans tous les sens et ça commence à me

J'ai une <layout:collection> que je fais apparaître dans un formulaire...seulement voilà, ma collection peut parfois être assez longue, aussi, je l'ai incluse dans une div scrollable (donc avec overflow:auto et une hauteur fixe...).

Dans un but ergonomique, je veux placer le bouton "submit" de mon fomulaire en dehors de cette div scrollable. Sachant que j'ai deux collections à faire apparaître, l'une avec les éléments à ajouter et l'autre avec les éléments à supprimer, j'ai voulu les faire apparaître l'une à côté de l'autre...

Ce qui me donne en définitive :

ma page jsp :

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
<div id="conteneurCommunes">
 
<div id="ajoutCommunes">
	<layout:form action="/ajouterCommunes">
		<div id="communes">
		<logic:notEmpty name="communes" scope="session">
		<layout:collection name="communes" id="commune" 
		indexId="index" styleClass="FORM" width="300"> 
			<layout:collectionItem title="COG" property="code"/>
			<layout:collectionItem title="Nom Commune" property="nomcommune"/>
			<layout:collectionItem title="Nombre Logements" property="nblogements"/>
			<layout:collectionItem title="Ajouter">
				<layout:checkbox name="communeForm" property="selects" layout="false" value="${commune.code}" />
			</layout:collectionItem>			
		</layout:collection>
		</logic:notEmpty>
		</div>
		<layout:submit>
			<layout:message key="ajouter.communes" bundle="resources" />
		</layout:submit>
	</layout:form>
</div>
 
<div id="suppressionCommunes">
	<layout:form action="/supprimerCommunes">
		<div id="communes">
		<logic:notEmpty name="communesSelect" scope="session">
		<layout:collection name="communesSelect" indexId="index" 
		id="commune" styleClass="FORM"> 
			<layout:collectionItem title="COG" property="code"/>
			<layout:collectionItem title="Nom Commune" property="nomcommune"/>
			<layout:collectionItem title="Nombre Logements" property="nblogements"/>
			<layout:collectionItem title="Supprimer">
				<layout:checkbox name="communeForm" property="selects" layout="false" value="${commune.code}" />
			</layout:collectionItem>
		</layout:collection>
		</logic:notEmpty>
		</div>
		<layout:submit>
			<layout:message key="supprimer.communes" bundle="resources" />
		</layout:submit>
	</layout:form>
</div>
 
 
</div>

et ma feuille de style :

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
#conteneurCommunes{
width:750px;
height:300px;
border: double 2px black;
overflow:auto;
}
 
#communes{
width:300px;
height:250px;
overflow:auto;
}
 
#ajoutCommunes{
width:350px;
height:300px;
float:left;
border: double 2px black;
overflow:auto;
}
 
#suppressionCommunes{
width:350px;
height:300px;
float:right;
border: double 2px black;
overflow:auto;
}

Mon problème : la collection n'est pas dans la div scrollable, au lieu de ça, il me crée une div scrollable au dessus de mon formulaire et donc de ma collection

Si quelqun a une solution miracle, je suis preneur...

PS : je sais qu'il existe une possibilité de déporter le submit d'un formulaire sur un bouton extérieur en utilisant du javascript mais j'aimerais éviter...

Merci d'avance !!

[Hanoni]

Je déduis de l'absence de réponse que soit, j'ai très mal formulé mon problème, soit que personne ne voit de solution à mon souci.

Finalement, j'ai opté pour un <layout:button> avec un petit onClick="document.getElementById('idDeMonForm').submit()", ce qui me permet de déporter le submit de mon formulaire en dehors du formulaire...et puis ça ira bien !

[c_nvy]

Cela fonctionne-t'il mieux en plaçant chaque balise div dans un tag layout:cell :

Code :

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

1
2
3
4
5
6
7
8
9
<layout:cell>
   <div id="ajoutCommunes">
      <layout:cell>
         <div id="communes">
	  ...
         </div>
      </layout:cell>
   </div>
</layout:cell>