"saut de ligne" avec une grille CSS en auto-flow

Version imprimable

Bonjour à tous,

je cherche un moyen propre de transposer un formulaire de calcul initialement en Excel vers un simple fichier html (avec un soupçon de css et de javascript).

N'ayant pas du tout suivi les dernières évolutions html5/css3, j'ai découvert pas mal de choses... j'ai commencé par essayé flex puis grille et j'ai trouvé que le second se prêtait nettement plus à mon besoin qui était d'aligner horizontalement et verticalement des libellés et des zones de saisies.

J'ai donc quelque chose comme ça dans le html (avec beaucoup plus de lignes):
Code:

1 2 3 4 5 6 7 8 9 10 11 <div class="calc"> <label for="aaa">Question 1</label> <input type="text" id="aaa" value="" maxlength="5"> <div class="filler"></div> <label for="bbb">Question 2</label> <input type="text" id="bbb" value=""> <label for="ccc">Question 3</label> <input type="checkbox" id="ccc" value="ccc"> <label for="ddd">Question 4</label> <input type="text" id="ddd" value=""> </div>
Et le css:
Code:

1 2 3 4 5 6 7 8 9 10 .calc { display: grid; grid-template-columns: repeat(3, max-content 1fr); grid-auto-flow: row; grid-gap: 5px; } .filler { grid-column-end: -1; }
Ça répond exactement à mon besoin : j'ai les 6 colonnes dont j'ai besoin (3 paires de libellé/valeurs), les colonnes des libellés prennent la largeur du plus grand élément de la colonne et les colonnes de valeurs se répartissent l'espace restant et font la même dimension.
Il me reste 2 questions :
1) est-ce que je ne suis pas complètement à côté de la plaque dans mon choix technique ou est-ce qu'il y a autre chose qui serait plus adapté ?
2) certaines questions sont indépendantes et d'autres sont liées, c'est pour ça que j'ai 6 colonnes : il y a pas mal de lignes qui ont les 3 paires de libellés+valeurs et quelques lignes qui n'ont qu'une ou deux paires. J'ai donc cherché un moyen "d'arrêter une ligne" sans avoir à positionner explicitement chaque élément sur la grille (y'en a beaucoup) ; le meilleur moyen que j'ai trouvé pour le moment c'est avec le <div class="filler"></div> et le style grid-column-end: -1;. Est-ce que ce qu'il y aurait un autre moyen plus propre ? (je voulais utiliser une balise <br class="filler"> mais ça ne marche pas ?).

Merci d'avance pour votre aide !

Bonjour,

le système de grid n'est pas compatible avec I.E.

Autre solution :

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
<div class="calc">
  <div>
    <label for="aaa">Question 1</label>
    <input type="text" id="aaa" value="" maxlength="5">
  </div>
  <div>
    <label for="bbb">Question 2</label>
    <input type="text" id="bbb" value="">
    <label for="ccc">Question 3</label>
    <input type="checkbox" id="ccc" value="ccc">
    <label for="ddd">Question 4</label>
    <input type="text" id="ddd" value="">
  </div>
  <div>
    <label for="bbb">Question 2</label>
    <input type="text" id="bbb" value="">
    <label for="ccc">Question 3</label>
    <input type="checkbox" id="ccc" value="ccc">
    <label for="ddd">Question 4</label>
    <input type="text" id="ddd" value="">
  </div>
  <div>
    <label for="eee">Question 5</label>
    <input type="text" id="eee" value="">
    <label for="fff">Question 6</label>
    <input type="text" id="fff" value="">
   </div>
</div>

Code:

1
2
3
.calc > div { display:flex; display:-webkit-flex; }
.calc > div > label { -webkit-flex:0 0 10%; flex:0 0 10%; margin:5px; }
.calc > div > input { -webkit-flex:1 1 20%; flex:1 1 20%; margin:5px; padding:5px; }

Sinon, il faut pousser un peu plus loin, en englobant les couples label/input avec un <div> :

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
29
30
31
32
<div class="calc">
  <div>
    <div>
      <label for="aaa">Question 1</label>
      <input type="text" id="aaa" value="" maxlength="5">
    </div>
  </div>
  <div>
    <div>
      <label for="bbb">Question 2</label>
      <input type="text" id="bbb" value="">
    </div>
    <div>
      <label for="ccc">Question 3</label>
      <input type="checkbox" id="ccc" value="ccc">
    </div>
    <div>
      <label for="ddd">Question 4</label>
      <input type="text" id="ddd" value="">
    </div>
  </div>
  <div>
    <div>
      <label for="eee">Question 5</label>
      <input type="text" id="eee" value="">
    </div>
    <div>
      <label for="fff">Question 6</label>
      <input type="text" id="fff" value="">
    </div>
  </div>
</div>

Code:

1
2
3
4
5
6
7
* { box-sizing:border-box; }
.calc > div { display:flex; display:-webkit-flex; }
.calc > div > div { -webkit-flex:0 0 33.33%; flex:0 0 33.33%; padding:5px; 
display:flex; display:-webkit-flex; }
 
.calc > div > div > label { -webkit-flex:1 1 30%; flex:0 0 30%; padding:5px; }
.calc > div > div > input { -webkit-flex:1 1 70%; flex:0 0 70%; padding:5px; }

:salut:

On peut choisir de placer chaque élément de la grille à une position déterminée. Exemple :

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
29
30
31
32
33
34
<div class="calc">
    <div class="question1">
        <label for="aaa">Question 1</label>
        <input type="text" id="aaa" value="" maxlength="5">
    </div>
    <div class="question2">
        <label for="bbb">Question 2</label>
        <input type="text" id="bbb" value="">
    </div>
    <div class="question3">
        <label for="ccc">Question 3</label>
        <input type="checkbox" id="ccc" value="ccc">
    </div>
    <div class="question4">
        <label for="ddd">Question 4</label>
        <input type="text" id="ddd" value="">        
    </div>
    <div class="question5">
        <label for="aaa2">Question 5</label>
        <input type="text" id="aaa2" value="" maxlength="5">
    </div>
    <div class="question6">
        <label for="bbb2">Question 6</label>
        <input type="text" id="bbb6" value="">
    </div>
    <div class="question7">
        <label for="ccc2">Question 7</label>
        <input type="checkbox" id="ccc2" value="ccc">
    </div>
    <div class="question8">
        <label for="ddd2">Question 8</label>
        <input type="text" id="ddd2" value="">        
    </div>
</div>

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
29
30
31
32
33
34
35
36
37
38
39
40
41
.calc {
	display: grid;
	grid-template-columns: repeat(3, 1fr);		
	grid-template-rows: repeat(min-content, 6);
	grid-gap: 5px;
}
div[class^='question'] {
	border: 1pt dotted blue;
}
.question1 {
	grid-column: 1;
	grid-row: 1;
}
.question2 {
	grid-column: 1;
	grid-row: 2;
}
.question3 {
	grid-column: 2;
	grid-row: 2;
}
.question4 {
	grid-column: 3;
	grid-row: 2;
}
.question5 {
	grid-column: 1;
	grid-row: 4;
}
.question6 {
	grid-column: 3;
	grid-row: 4;
}
.question7 {
	grid-column: 2;
	grid-row: 5;
}
.question8 {
	grid-column: 3;
	grid-row: 6;
}

09/04/2018, 11h46
Invité
Citation:

Envoyé par jreaux62

le système de grid n'est pas compatible avec I.E.
- grid-template-columns (voir "Compatibilité...")
Même si I.E. ne représente plus que 7%, ce n'est pas négligeable (cf les statistiques 2017).
09/04/2018, 12h04
lennelei

Bonjour,

merci pour ces premières réponses, j'ai oublié un détail important (désolé): ça n'est pas destiné à aller sur le net : c'est un outil interne, donc je connais les postes et les navigateurs utilisés (et IE n'en fait pas partie :mrgreen:) !

@danielhagnoul: je voulais justement éviter de placer chaque élément parce que j'en ai une palanquée ! Si je dois modifier l'ordre ou autre, je vais pleurer !
@jreaux62: merci pour l'option flex. Je vais l'étudier pour tout comprendre et la garder sous le coude si un jour j'ai besoin de généraliser, mais comme ça me semble plus complexe et que je n'ai pas de problème de compatibilité, je vais sans doute rester sur la grille pour le moment :)

Merci encore !