Discussion :

[CinePhil]

Bonjour,

Petite difficulté pour moi qui ne suis pas habitué à manipuler le CSS...

J'ai un formulaire avec une série de contrôles qui peuvent se suivre sur la même ligne. En voici une capture partielle :


Les labels et les input texte de la première colonne sont tous de classe labelMoyen de largeur 198px.
Les deux select de la première colonne sont de classe selectMoyen de largeur 140, choisie en fonction du contenu de la liste.

Comme le label "Année dans le diplôme" se retrouve au dessus de l'input "Date de candidature", j'ai eu l'idée de lui appliquer une classe col2 en position absolute left à 400px mais le select qui lui correspond ne suit pas son label et se retrouve au dessus du label.


Quelle est la bonne pratique pas trop compliquée pour aligner joliment les contrôles d'un formulaire sur plusieurs colonnes ?

[Invité]

Bonjour,

1- position absolute : mauvaise idée

2- Montre ton code (code HTML généré ! "Ctril"+"U").

[CinePhil]

Voilà l'extrait de code html produit concerné.

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
<form id="form_ajout_inscription" enctype="multipart/form-data" action="fr/Inscription/Ajouter" method="post">
	<div id="menuOnglets">
		<ul>
			<li onClick="afficherOnglet(0);">Inscription</li>
			<li onClick="afficherOnglet(1);">Personne</li>
			<li onClick="afficherOnglet(2);">Adresses postales</li>
			<li onClick="afficherOnglet(3);">Scolarité</li>
			<li onClick="afficherOnglet(4);">Divers</li>
		</ul>
	</div><!-- Fin menuOnglets -->
	<div id="contenuOnglets">
		<div id="onglet0" class="onglets"><!-- Onglet Inscription -->
			<div id="inscDiplome">
				<label for="annee_universitaire" class="labelMoyen gridCol1">Année universitaire :</label>
				<select id="annee_universitaire" name="annee_universitaire" class="selectMoyen">
					<option value="2018"
										>
						2018-2019					</option>
					<option value="2019"
							 			>
						2019-2020					</option>
				</select><!-- Fin annee_universitaire -->
				<br />
				<label for="diplome_ensfea" class="labelMoyen gridCol1">Diplôme ENSFEA choisi :</label>
				<select id="diplome_ensfea" name="diplome_ensfea" class="selectMoyen" onChange="afficheMention(this.value);">
					<option value="0" selected >--Sélectionner--</option>
							<option value="207"
										>
						Master AFC					</option>
							<option value="133"
										>
						Master IFSE					</option>
							<option value="132"
										>
						Master MEEF					</option>
						</select>&nbsp;<!-- Fin diplome_ensfea -->
				<label for="diplomeAnnee" class="labelMoyen gridCol2">Année dans le diplôme :</label>
				<select name="diplomeAnnee" class="selectCourt">
					<option value="1"
										>
						1
					</option>
					<option value="2"
										>
						2
					</option>
				</select>&nbsp;<!-- Fin diplomeAnnee -->

J'ai aussi essayé un peu la technique grid (que je ne connaissais pas) ce matin mais ça n'a rien changé.
La mise en forme, c'est pas mon truc.

[ProgElecT]

Salut

Moi je serai toi, j'ajouterai la partie code CSS

[NoSmoking]

Bonjour,
grid, flex ou table, actuellement on a l'embarras du choix mais je partirais sur un modèle de boîte table-xxx et non <table>, ne pas confondre !

Sur base de la structure suivante :

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
<div class="table-groupe">
  <p>
    <label>Label #1.1</label>
    <select class="s-medium"></select>
  </p>
  <p>
    <label>Label #2.1</label>
    <select class="s-medium"></select>
    <label>Label #2.2</label>
    <select class="s-small"></select>
  </p>
  <p>
    <label>Label #3.1</label>
    <select></select>
    <label>Label #3.2</label>
    <select></select>
  </p>
  <p>
    <label>Label #4.1</label>
    <select></select>
    <label>Label #4.2</label>
    <select></select>
  </p>
  <p>
    <label>Label #5.1</label>
    <select></select>
    <label>Label #5.2</label>
    <select></select>
  </p>
</div>

et en appliquant le CSS 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
25
26
27
28
29
30
31
32
33
34
.table-groupe {
  display: table;
  border: 1px solid green;
  border-collapse: separate;
  border-spacing: .5em;
  background: #DDFCB0;
}
.table-groupe p {
  display: table-row;
  background: #ADA;
}
.table-groupe p * {
  display: table-cell;
  vertical-align: bottom;
}
.table-groupe label {
  width: 12em;
  margin: .25em;
}
.table-groupe label::after {
  content: ":";
  float: right;
}
.table-groupe select {
  width: 12em;
  margin: 0;
  font: inherit;
}
.table-groupe select.s-medium {
  width: 9em;
}
.table-groupe select.s-small {
  width: 6em;
}

tu ne devrais pas être loin de ce que tu cherches à obtenir.

[CinePhil]

Merci, je vais étudier ça ; je ne connais pas.

[Invité]

Bon.

Si tu veux que ton formulaire soit "responsive", il faut :

• mettre les largeurs (des colonnes) en %
• ajouter un media query, pour être par défaut ("mobile first") sur 1 colonne, et passer sur 2 colonnes si la largeur (de la fenêtre) est supérieure à xxx px ("break-point" à 768px, par exemple)

Voici une solution avec flexbox :

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
<div class="flex-groupe">
  <p>
    <label>Label #1.1</label>
    <select></select>
  </p>
</div>
<div class="flex-groupe">
  <p>
    <label>Label #2.1</label>
    <select>
      <option>xxx #2.1</option>
    </select>
  </p>
  <p>
    <label>Label #2.2</label>
    <select>
      <option>xxx #2.2</option>
    </select>
  </p>
 
  <p>
    <label>Label #3.1</label>
    <select>
      <option>xxx #3.1</option>
    </select>
  </p>
  <p>
    <label>Label #3.2</label>
    <select>
      <option>xxx #3.2</option>
    </select>
  </p>
 
  <p>
    <label>Label #4.1</label>
    <select>
      <option>xxx #4.1</option>
    </select>
  </p>
  <p>
    <label>Label #4.2</label>
    <select>
      <option>xxx #4.2</option>
    </select>
  </p>
</div>

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
20
21
22
23
24
25
26
27
28
29
30
.flex-groupe {
  display: -webkit-flex;
  display: flex;
  flex-wrap: wrap;
}
.flex-groupe > p {
  vertical-align: bottom;
  flex:0 0 100%; width: 100%; /* 1 colonne */
  display: -webkit-flex;
  display: flex;
}
.flex-groupe > p label {
  display: block;
  flex:0 0 40%; width: 40%;
}
.table-groupe > p select {
  display: block;
  flex:0 0 60%; width: 60%;
}
.flex-groupe label::after {
  content: ":";
  float: right;
}
/* TABLET - DESKTOP */
@media screen and (min-width: 768px) {
  /* on passe sur 2 colonnes */
  .flex-groupe > p {
    flex:0 0 50%; width: 50%; /* 2 colonnes */
  }
}