qui le suit

Version imprimable

06/02/2019, 09h59
CinePhil

2 pièce(s) jointe(s)

<label> en absolute et <select> qui le suit

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 :
Pièce jointe 447720

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. :aie::calim2:
Pièce jointe 447728

Quelle est la bonne pratique pas trop compliquée pour aligner joliment les contrôles d'un formulaire sur plusieurs colonnes ?
06/02/2019, 12h53
Invité

Bonjour,

1- position absolute : mauvaise idée ;)

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

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

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
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.

06/02/2019, 13h51
ProgElecT

Salut

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

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:

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:

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.

06/02/2019, 14h46
CinePhil

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

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:

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:

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 */
  }
}