Discussion :

[clavier12AZQSWX]

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 ?

[NoSmoking]

Bonjour,

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.

pas forcément, il y a plus propre, et tu peux subir les contrainte du CSS en place, ici visiblement BootStrap ver.?

j'ai ajouté ce code là en jquery dans le dom ready :
...
mais ça ne marche pas, j'ai un bug étrange qui produit cela :
où est le problème ?

Toutes les joies du float:left et ses effets sournois


Ceci étant, comme tu ne peux pas faire ce que tu veux, il existe une autre façon d'injecter du CSS dans une page sans passer par du code d'affectation individuel. Je pense que dans ton cas cela semble être le mieux.

La méthode consiste à ajouter un élément <style> en fin de page qui prend en compte ton nouveau besoin, la chose qui reste délicate est de savoir quoi mettre dedans.
Il est important de voir que dans ton cas il faut tenir compte du fait que tu utilises BootStrap.

En tenant compte de cela voilà à quel CSS j'en suis arrivé, et qui devrait te convenir :

Code css :

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
@media(min-width:576px) {
  .ew-edit-div {
    display: inline-flex;
    flex-wrap: wrap;
    margin: auto;
  }
  [id^="r_etu_"] {
    flex: 0 0 50%;
  }
  [id^="r_etu_"] label {
    flex: 0 0 30%;
    max-width: 30%;
    white-space: nowrap;
  }
  [id^="r_etu_"] .col-sm-10 {
    flex: 0 0 65%;
    max-width: 65%;
  }
}

Pour les détails je te laisse reprendre les différentes documentations et ajuster suivant le besoin.

Passons à l'intégration.
On peut soit mettre tout le code dans la page, soit faire un appel Ajax et charger un fichier qui contient les nouvelles règles.

Méthode #1 :
Le code, en plaçant tout dans le DomReady, pourrait être le suivant :

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
const customCSS = `
  @media(min-width:576px) {
    .ew-edit-div {
      display: inline-flex;
      flex-wrap: wrap;
      margin: auto;
    }
    [id^="r_etu_"] {
      flex: 0 0 50%;
    }
    [id^="r_etu_"] label {
      flex: 0 0 30%;
      max-width: 30%;
      white-space: nowrap;
    }
    [id^="r_etu_"] .col-sm-10 {
      flex: 0 0 65%;
      max-width: 65%;
    }
  }
`;
const $tyle = $("<style>")
  .text(customCSS)
  .appendTo($("body"));

J'ai utilisé le « Template literals » pour la lisibilité, mais si tu dois supporter les anciens navigateurs, IE pour le nommer, tu peux créer une simple chaine.

Méthode #2 :
Tout le CSS modifié est à placer dans un fichier, par exemple custom-css.css, exactement comme un fichier CSS normal.

Comme tu ne peux pas l'intégrer à la mano il suffit de l’appeler via Ajax :

Code :

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

1
2
3
4
5
6
7
$.ajax({
  url: "custom-css.css",
}).done(function(css) {
  $("<style>")
    .text(css)
    .appendTo($("body"));
});

cette méthode est à mon goût la plus souple/propre.


Maintenant il te reste la méthode sur laquelle tu étais parti ...

Ton soucis de départ restant quand même un problème de CSS et non de code, j'espère que tu auras ta réponse même si je ne l'ai pas détaillé.

[clavier12AZQSWX]

merci pour cette longue explication, je vais essayer demain .

je viens de me souvenir et me rendre compte que mon souvenir était confus!
j'ai confondu l'allignement des div et la méthode d'insertion d'une lettrine (façon incrustation image); d'où le float:left que j'ai mis !
or c'est pas bon du tout.
Mon idée initiale était d'utiliser le display: inline-block !! ça explique mon résultat farfelu !

Demain, je vais tout eclaircir...

Encore merci pour la réponse.

[NoSmoking]

Demain, je vais tout eclaircir...

pourrais-tu en profiter pour éclaircir certaines de tes discussions restées en suspens comme par exemple :

• Inverser la valeur de 2 variables sans passer par une troisième intermédiaire
• Ajouter un élément BR avec append
• Atteindre (obtenir) la valeur textuelle à l'intérieur d'un SPAN

Merci.