Aligner des div avec des input

**pc75** · 04/07/2013, 10h20

Bonjour,

Dans un formulaire, j'ai plusieurs zones de saisie (text, textarea, ...).
Quand on quitte une zone, un onblur déclenche un vérificateur orthographique (full javascript), et les éventuelles erreurs sont affichées dans une balise div.

Y-a-t-il un algorythme qui permet d'ajuster la longueur de mes div à la longueur des zones de saisie desquelles elles dépendent.

En résumé comment faire pour que mes div aient la même longueur que mes zones de saisie ?

Merci

Mon code :

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
35
36
37
38
39
40
41
 
<HTML>
<HEAD>
<meta 	http-equiv="content-Language" 		content="fr-FR">
<meta 	http-equiv="content-type" 		content="text/html; charset=ISO-8859-1">
<meta 	http-equiv="imagetoolbar" 		content="no">
<Script Type="Text/JavaScript" Src="Sources/Fonctions.js"></Script>
</HEAD>
<BODY>
<form name="frm">
Activer le vérificateur orthographique : 
<input type="checkbox" name="ActiveSpell" id="ActiveSpell">
<br><br>
<div>
	<input type="text" name="texte1" id="texte1" size="50" onblur="Controle(this.name, 'aff1')">
	<br>
	<div name="aff1" id="aff1" style="background-color:lightgrey;width:1000px;font-size:13px;font-style:italic;text-align:left;display:none;">
	</div>
</div>
<br>
 
<div>
	<input type="text" name="texte2" id="texte2" size="100" onblur="Controle(this.name, 'aff2')">
	<br>
	<div name="aff2" id="aff2" style="background-color:lightgrey;width:1000px;font-size:13px;font-style:italic;text-align:left;display:none;">
	</div>
</div>
<br>
 
<div>
	<textarea name="texte3"  id="texte3" cols="50" rows="10" onblur="Controle(this.name, 'aff3')"></textarea>
	<br>
	<div name="aff3" id="aff3" style="background-color:lightgrey;width:1000px;font-size:13px;font-style:italic;text-align:left;display:none;">
	</div>
</div>
 
</form>
<Script Type="Text/JavaScript" Src="Sources/Initialisation.js"></Script>
 
</BODY>
</HTML>

**rodolphebrd** · 04/07/2013, 10h29

Bonjour,

juste pour bien comprendre, est-ce que vous voulez quelque chose comme cela:

Code css :

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

1
2
3
input, textarea {
	width :250px; /* ou unités un %*/
}

**pc75** · 04/07/2013, 10h37

Re,

Merci, mais je pense avoir trouvé une solution.
Pour mes input, j'ai remplacé la propriété size par une balise style, et pour mes textareas, j'ai remplacé la propriété rows par une balise style.

Mon nouveau code :

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
35
36
37
38
39
40
41
 
<HTML>
<HEAD>
<meta 	http-equiv="content-Language" 		content="fr-FR">
<meta 	http-equiv="content-type" 		content="text/html; charset=ISO-8859-1">
<meta 	http-equiv="imagetoolbar" 		content="no">
<Script Type="Text/JavaScript" Src="Sources/Fonctions.js"></Script>
</HEAD>
<BODY>
<form name="frm">
Activer le vérificateur orthographique : 
<input type="checkbox" name="ActiveSpell" id="ActiveSpell">
<br><br>
<div>
	<input type="text" name="texte1" id="texte1" style="width:200px" onblur="Controle(this.name, 'aff1')">
	<br>
	<div name="aff1" id="aff1" style="background-color:lightgrey;width:200px;font-size:13px;font-style:italic;text-align:left;display:none;">
	</div>
</div>
<br>
 
<div>
	<input type="text" name="texte2" id="texte2" style="width:500px" onblur="Controle(this.name, 'aff2')">
	<br>
	<div name="aff2" id="aff2" style="background-color:lightgrey;width:500px;font-size:13px;font-style:italic;text-align:left;display:none;">
	</div>
</div>
<br>
 
<div>
	<textarea name="texte3"  id="texte3" rows="10" style="width:1000px" onblur="Controle(this.name, 'aff3')"></textarea>
	<br>
	<div name="aff3" id="aff3" style="background-color:lightgrey;width:1000px;font-size:13px;font-style:italic;text-align:left;display:none;">
	</div>
</div>
 
</form>
<Script Type="Text/JavaScript" Src="Sources/Initialisation.js"></Script>
 
</BODY>
</HTML>

**rodolphebrd** · 04/07/2013, 10h58

Pour pouvoir tester les div correspondantes il faudrait le code Js...

**pc75** · 04/07/2013, 11h16

Re,

Ci-joint le contenu de mon sous-répertoire Sources qui contient les .js

Par contre, j'ai un second problème ; Sous Firefox, la longueur des div ne s'aligne pas et la couleur de fond reste transparente.

Une idée ?

Merci.

**rodolphebrd** · 04/07/2013, 11h56

Je n'arrive pas a tester votre code car il ne se passe rien après mise en place du contenu de votre pièce jointe.

Je suis allé voir sur le site de marcel-bultez pour vérifier et je pense qu'il manque quelque chose dans ce vous donnez.

**pc75** · 04/07/2013, 11h59

Re,
Comment est l'arborescence de votre site ?

**rodolphebrd** · 04/07/2013, 13h34

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
<!doctype html>
<html lang="fr">
<HEAD>
<meta charset="ISO-8859-1">
<Script type="text/javascript" src="js.testdev478/Fonctions.js"></Script>
<link href="js.testdev478/Style.css" rel="stylesheet" type="text/css">
</HEAD>
 
<BODY>
<form name="frm">
  Activer le vérificateur orthographique :
  <input type="checkbox" name="ActiveSpell" id="ActiveSpell">
  <br>
  <br>
  <div>
    <input type="text" name="texte1" id="texte1" style="width:200px" onblur="Controle(this.name, 'aff1')">
    <br>
    <div name="aff1" id="aff1" style="background-color:lightgrey;width:200px;font-size:13px;font-style:italic;text-align:left;display:none;"> </div>
  </div>
  <br>
  <div>
    <input type="text" name="texte2" id="texte2" style="width:500px" onblur="Controle(this.name, 'aff2')">
    <br>
    <div name="aff2" id="aff2" style="background-color:lightgrey;width:500px;font-size:13px;font-style:italic;text-align:left;display:none;"> </div>
  </div>
  <br>
  <div>
    <textarea name="texte3"  id="texte3" rows="10" style="width:1000px" onblur="Controle(this.name, 'aff3')"></textarea>
    <br>
    <div name="aff3" id="aff3" style="background-color:lightgrey;width:1000px;font-size:13px;font-style:italic;text-align:left;display:none;"> </div>
  </div>
</form>
<Script type="text/javascript" src="js.testdev478/Initialisation.js"></Script>
</BODY>
</html>

Question: pourquoi pas un charset en utf-8 ?

**pc75** · 04/07/2013, 13h39

Re,

C'est dans le code original.

Il faut modifier le nom du répertoire dans le fichier Initialisation.js

**rodolphebrd** · 04/07/2013, 13h49

Ok fait, j'ai recréé un répertoire Sources à l'identique mais toujours rien

Je tape un mot comme "vasedf" : que doit-il se passer?

**pc75** · 04/07/2013, 13h57

Ci-joint, ce que j'obtiens.

La case à cocher est bien activée ?

**rodolphebrd** · 04/07/2013, 14h11

Ok ça marche, j'ai dû placer tous les scripts (a, b, c...).

Bon je vais pouvoir enfin entrer dans le sujet

**pc75** · 04/07/2013, 14h20

OK.

Ci-joint, les résultats que j'obtiens sur IE et FF

**rodolphebrd** · 04/07/2013, 14h30

En gros vous voulez agir sur la balise qui comprend le résultat de la correction.
C'est possible dans le script Fonctions :

Code javascript :

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

return '<LABEL style="BACKGROUND-COLOR: rgb(255,172,172); display:inline-block; width:200px">'+rch+'</LABEL>';

J'ai rajouté : display:inline-block; width:200px

**pc75** · 04/07/2013, 14h51

Re,

J'ai rajouté : display:inline-block; width:200px et voila le résultat. Sous FF, la div n'est pas alignée au textarea.

**rodolphebrd** · 04/07/2013, 15h08

Enlever le style du label dans le script, puis rajouter ces styles (j'ai changer les styles inline de place)
Il subsiste un padding/margin à faire sauter mais on se rapproche...

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
label {
	display:inline-block;
	width:inherit;
	background-color: lightgrey;
}
#aff1 {
	width: 200px;
	font-size: 13px;
	font-style: italic;
	text-align: left;
    display: none;
}
#aff2 {
	width: 500px;
	font-size: 13px;
	font-style: italic;
	text-align: left;
	display: none;
}
#aff3 {
	width: 1000px;
	font-size: 13px;
	font-style: italic;
	text-align: left;
	display: none;
}

**pc75** · 04/07/2013, 15h22

J'ai rétabli le label :

Code :

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

1
2
 
return '<LABEL style="BACKGROUND-COLOR: rgb(255,172,172);">'+rch+'</LABEL>';	// signaler un mot erroné

J'ai rajouté les styles, mais sous FF, c'est toujours pareil !

**rodolphebrd** · 04/07/2013, 15h28

Tu peux enlever les styles vu que c'est gérer en CSS à partir du code que j'ai transmis:

Code javascript :

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

 return '<LABEL>'+rch+'</LABEL>';

Sur FF, j'ai un comportement identique par rapport aux autres navigateurs (pj)

**pc75** · 04/07/2013, 15h41

Dans la fonction, j'ai ça :

Code :

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

1
2
 
return '<LABEL>'+rch+'</LABEL>';	// signaler un mot erroné

Mon code est comme ça :

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
 
<HTML>
<HEAD>
<meta 	http-equiv="content-Language" 		content="fr-FR">
<meta 	http-equiv="content-type" 		content="text/html; charset=ISO-8859-1">
<meta 	http-equiv="imagetoolbar" 		content="no">
<Script Type="Text/JavaScript" Src="Sources/Fonctions.js"></Script>
 
<style>
label {
        display:inline-block;
        width:inherit;
        background-color: lightgrey;
}
#aff1 {
        width: 200px;
        font-size: 13px;
        font-style: italic;
        text-align: left;
    display: none;
        background-color:lightgrey;
}
#aff2 {
        width: 500px;
        font-size: 13px;
        font-style: italic;
        text-align: left;
        display: none;
        background-color:lightgrey;
}
#aff3 {
        width: 1000px;
        font-size: 13px;
        font-style: italic;
        text-align: left;
        display: none;
        background-color:lightgrey;
}
</style>
 
</HEAD>
<BODY>
 
<form name="frm">
Activer le vérificateur orthographique : 
<input type="checkbox" name="ActiveSpell" id="ActiveSpell">
<br><br>
<div>
	<input type="text" name="texte1" id="texte1" style="width:200px" onblur="Controle(this.name, 'aff1')">
	<br>
	<div name="aff1" id="aff1">
	</div>
</div>
<br>
 
<div>
	<input type="text" name="texte2" id="texte2" style="width:500px" onblur="Controle(this.name, 'aff2')">
	<br>
	<div name="aff2" id="aff2">
	</div>
</div>
<br>
 
<div>
	<textarea name="texte3" id="texte3" rows="10" style="width:1000px" onblur="Controle(this.name, 'aff3')"></textarea>
	<br>
	<div name="aff3" id="aff3">
	</div>
</div>
 
</form>
<Script Type="Text/JavaScript" Src="Sources/Initialisation.js"></Script>
 
</BODY>
</HTML>

Le résultat n'est pas vraiment concluant, et on perd le surlignage des fautes !