Discussion :

[Invité]

bonjour,

je travaille avec un framework prompriétaire qui ne me donne pas la main pour modifier directement le code html ni le CSS côté serveur.
Par contre il m'offre la main pour insérer ce que je veux en JS dans le document ready.

Je souhaite aligner des champs de formulaires qui sont pour l'instant tous l'un en dessous l'autre dans une même DIV.



je voudrais les aligner côte à cote, ils marchent par paires de deux (un champ liste groupe , et un champ date JUSQUE).



Je connais la stratégie si mes souvenir sont bons, normalement il suffit de mettre le container en relative et de mettre les fils DIV en floating left.


j'ai ajouté ce code là en jquery dans le dom ready :

Code :

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

1
2
3
	$('#tab_etudiants10.tab_etudiants10').css('position','relative');
	$('#r_etu_grp1_id').css('float','left');
	$('#r_etu_grp2_id').css('float','left');

mais ça ne marche pas, j'ai un bug étrange qui produit cela :




où est le problème ?
quand je regarde le code source dans le navigateur, ça me semble correct (j'ai bien choisi le container DIV et les fils ).
exemple du code source (juste pour 2 paires de groupes) :

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<div class="tab-pane" id="tab_etudiants10"><!-- multi-page .tab-pane -->
<div class="ew-edit-div"><!-- page* -->
	<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" class="form-control">
			<option value="">Choisir...</option>		</select>
</div>
</span>
</div></div>
	</div>
	<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">
<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="" class="form-control">
<script>
loadjs.ready(["fetudiantsedit", "datetimepicker"], function() {
        ew.createDateTimePicker("fetudiantsedit", "x_etu_grp1_date", {"ignoreReadonly":true,"useCurrent":false,"format":0});
});
</script>
</span>
</div></div>
	</div>
	<div id="r_etu_grp2_id" class="form-group row">
		<label id="elh_etudiants_etu_grp2_id" for="x_etu_grp2_id" class="col-sm-2 col-form-label ew-label">Groupe 2</label>
		<div class="col-sm-10"><div >
<span id="el_etudiants_etu_grp2_id">
<div class="input-group">
	<select class="custom-select ew-custom-select" data-table="etudiants" data-field="x_etu_grp2_id" data-page="10" data-value-separator=", " id="x_etu_grp2_id" name="x_etu_grp2_id" class="form-control">
			<option value="">Choisir...</option>		</select>
</div>
</span>
</div></div>
	</div>
	<div id="r_etu_grp2_date" class="form-group row">
		<label id="elh_etudiants_etu_grp2_date" for="x_etu_grp2_date" class="col-sm-2 col-form-label ew-label">Jusque</label>
		<div class="col-sm-10"><div >
<span id="el_etudiants_etu_grp2_date">
<input type="text" data-table="etudiants" data-field="x_etu_grp2_date" data-page="10" name="x_etu_grp2_date" id="x_etu_grp2_date" maxlength="10" value="" class="form-control">
<script>
loadjs.ready(["fetudiantsedit", "datetimepicker"], function() {
        ew.createDateTimePicker("fetudiantsedit", "x_etu_grp2_date", {"ignoreReadonly":true,"useCurrent":false,"format":0});
});
</script>
</span>
</div>
</div>
</div>
</div>
</div>

Avec le F12 de firefox, je vois dans le code source , des étiquettes "flex", j'espère que ça n'influence pas mon rendu car normalement le FLEX agit avant le dom ready où je place mon jquery (fin de doc)

Avez-vous une idée du problème ?