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 ?