Déplacement de 2 DIV pour aller dans des cellules d'un tableau
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:
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:
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 ?
