Discussion :

[clavier12AZQSWX]

bonjour,

j'ai 24 champs d'un formulaires qui fonctionnent par deux (un choix de liste et un choix de date).
actuellement ils sont présentés les un en dessous des autres à la file.
je souhaite les présenter par deux c-a-d 12 lignes de 2 colonnes pour faciliter la saisie et limiter la hauteur de page (moins de scrolling, plus facile à imprimer).
la présentation actuelle est imposée par le framework propriétaire qui a une mise en page css avec flex que je ne peux pas modifier (rendu serveur).

ma seule possibilité c'est d'ajouter un script , car l'IHM m'autorise à place un js jquery en fin de page, un script qui va placer un tableau de 2 colonnes et dedans je vais y déplacer les div des formulaires.

mon problème, c'est qu'une fois que j'ai déplacé mes div, les 2 champs sont invisibles à l'écran ! et je comprends pas pourquoi !
voici le code html de départ (je le simplifie pour le forum en prenant que 2 champs au lieu des 24) :

Code html :

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
 
<!--1er champs -->
<div id="r_etu_grp1_id" class="form-group row">
		<label id="elh_etudiants_etu_grp1_id" for="x_etu_grp1_id" class="col-sm-2 col-form-label ew-label">Groupe 1</label>
		<div class="col-sm-10"><div>
<span id="el_etudiants_etu_grp1_id">
<div class="input-group">
	<select class="custom-select ew-custom-select" data-table="etudiants" data-field="x_etu_grp1_id" data-page="10" data-value-separator=", " id="x_etu_grp1_id" name="x_etu_grp1_id">
			<option value="">Choisir...</option>		<option value="1">NC</option><option value="94">ART</option></select>
</div>
</span>
</div></div>
	</div>
<!--2eme champs -->
<div id="r_etu_grp1_date" class="form-group row">
		<label id="elh_etudiants_etu_grp1_date" for="x_etu_grp1_date" class="col-sm-2 col-form-label ew-label">Jusque</label>
		<div class="col-sm-10"><div>
<span id="el_etudiants_etu_grp1_date">
<div class="input-group date" id="datetimepicker_fetudiantseditx_etu_grp1_date" data-target-input="nearest"><input type="text" data-table="etudiants" data-field="x_etu_grp1_date" data-page="10" name="x_etu_grp1_date" id="x_etu_grp1_date" maxlength="10" value="09/11/2021" class="form-control datetimepicker-input" data-target="#datetimepicker_fetudiantseditx_etu_grp1_date" data-original-title="" title=""><div class="input-group-append" data-target="#datetimepicker_fetudiantseditx_etu_grp1_date" data-toggle="datetimepicker"><button class="btn btn-default" type="button"><i class="far fa-calendar-alt"></i></button></div></div>
<script>
loadjs.ready(["fetudiantsedit", "datetimepicker"], function() {
        ew.createDateTimePicker("fetudiantsedit", "x_etu_grp1_date", {"ignoreReadonly":true,"useCurrent":false,"format":0});
});
</script>
</span>
</div>
</div>
</div>

voici mon code jquery. Dans un 1er temps je crée le tableau en mettant des id aux TD.
j’insère ensuite le tableau dans la page à l'endroit adéquat.
enfin je mets dans les cellules, les 2 champs div que je déplace.

Code javascript :

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

1
2
3
4
5
6
7
 
var tableau="<table width=100%>";
	tableau+="<tr><td id='c1r1'>1</td><td id='c2r1'>2</td></tr>";
	tableau+="</table>";
	$('.ew-edit-div').prepend(tableau);
	$("#r_etu_grp1_id").prependTo("#c1r1");
	$("#r_etu_grp1_date").prependTo("#c2r1");

comme dit plus haut, ça enlève bien les 2 div de leurs positions initiale mais à l'écran ya plus rien! elles ne sont plus visible dans le tableau après le déplacement. je ne comprends pas.
voyez-vous le souci, le problème ?

[clavier12AZQSWX]

j'ai trouvé mon erreur.

avec cette ligne :

Code :

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

$('.ew-edit-div').prepend(tableau);

j'ai posé mon tableau derrière la div de class ew-edit-div et je viens de découvrir qu'elle est pas unique ,en a plusieurs dans ma page.. et le 1er endroit trouvé avait des propriétés de class qui masquaient mon tableau....
Pour corriger, j'ai donc placé mon tableau après le dernier champs que je souhaite déplacer (le 24eme, soit le 12eme binome) :

Code :

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

$('#r_etu_grp12_date').after(tableau);