Aligner des div avec des input

Version imprimable

Voir 40 message(s) de cette discussion en une page

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:

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>

04/07/2013, 10h29
rodolphebrd
Bonjour,

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

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

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:

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>

04/07/2013, 10h58
rodolphebrd

Pour pouvoir tester les div correspondantes il faudrait le code Js...
04/07/2013, 11h16
pc75

1 pièce(s) jointe(s)

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.
04/07/2013, 11h56
rodolphebrd

:koi: 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.
04/07/2013, 11h59
pc75

Re,
Comment est l'arborescence de votre site ?

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
<!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 ?

04/07/2013, 13h39
pc75

Re,

C'est dans le code original.

Il faut modifier le nom du répertoire dans le fichier Initialisation.js
04/07/2013, 13h49
rodolphebrd

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?
04/07/2013, 13h57
pc75

1 pièce(s) jointe(s)

Ci-joint, ce que j'obtiens.

La case à cocher est bien activée ?
04/07/2013, 14h11
rodolphebrd

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

Bon je vais pouvoir enfin entrer dans le sujet :lol:
04/07/2013, 14h20
pc75

2 pièce(s) jointe(s)

OK.

Ci-joint, les résultats que j'obtiens sur IE et FF
04/07/2013, 14h30
rodolphebrd

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

Code:

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

J'ai rajouté : display:inline-block; width:200px
04/07/2013, 14h51
pc75

2 pièce(s) jointe(s)

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.

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:

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;
}

04/07/2013, 15h22
pc75
J'ai rétabli le label :
Code:

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 !
04/07/2013, 15h28
rodolphebrd

1 pièce(s) jointe(s)

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

Code:

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

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

2 pièce(s) jointe(s)

Dans la fonction, j'ai ça :

Code:

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

Mon code est comme ça :

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

04/07/2013, 15h53
rodolphebrd

Oui j'avais oublié ^^
tu peux ajouter au label: color:red;

Voir 40 message(s) de cette discussion en une page