Discussion :

[Casio]

Salutations,

Sur un formulaire CSS simple, je remarque une différence enquiquinante entre Chrome et Firefox.

En effet, le padding n'est pas effectif sur la forme du textarea, mais sur son contenu, du coup, lorsque mon contenu (dynamique) dépasse la hauteur de basse du textarea, la dernière ligne visible est collée au bottom du textearea au lieu d'avoir un padding visuel sur l'ensemble.

Humm, je sais pas si je me fais bien comprendre...



Voici une partie HTML/CSS :

Code html :

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

1
2
3
4
5
6
(...)
	<div>
		<textarea name="listing" class="input"><?php echo $contents; fclose($handle); ?></textarea>
		<input type="submit" value="MaJ du listing !" id="button" class="submit" />
	</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
div {
	text-align: center;
}
 
.input {
	text-align: justify;
	line-height: 22px; /* Hauteur du texte */
	margin: 10px 0px;
	padding: 20px;
	width: 95%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	background-color: #fbfbfb;
	font-family: Verdana, Arial;
	font-size: 12px;
	font-weight: 500;
	color: #3c3c3c;
	border-radius: 2em 0px 0px 2em;
	border: 3px solid #ff8727;
}
 
textarea {
	min-height: 260px;
	resize: vertical; /* Redimenssionnement QUE vertical */
	overflow: auto;
	overflow-x: hidden;
}
(...)

Ou c'est-y donc que j'ai merdouillé ?

[NoSmoking]

Bonjour,
bizarre que de vouloir faire du pile-poil alors que ta <textarea> est redimensionnable, toujours pas d'ailleurs sous IE !

Il me semble plus judicieux, compte-tenu de la différence de prise en compte du padding sur cet élément, de passer plutôt par un margin et de mettre la bordure sur le conteneur. L'effet ne sera peut-être pas le même mais le rendu sur les différents navigateurs oui.

D'autre part il me semble que si tu souhaites une « hauteur propre » tu as intérêt à passer par l'attribut rows des <textarea>.

[Casio]

Donc, faire un DIV autour du textarea ?

[NoSmoking]

Oui une <div> cadre, par exemple

Code html :

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

1
2
3
4
<div class="cadre-textarea">
  <textarea name="listing" class="input" rows="15"><?php echo $contents; fclose($handle); ?>
  </textarea>  
</div>

Nota : sur Chrome le padding est visiblement bien appliqué, dixit l'observateur d'élément, mais transparent, donc uniquement « réel » qu'en bas de l'élément après scroll.

[Casio]

Voici mon résultat :



Et le code correspondant :

Code html :

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

1
2
3
4
5
6
7
8
(...)
	<div align="center">
		<div class="cadre-textarea">
			<textarea name="listing" class="input"><?php echo $contents; ?></textarea>
		</div>
		<input type="submit" value="MaJ du listing !" id="button" class="submit" />
	</div>
(...)

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
.cadre-textarea {
	margin: 10px 0px;
	padding: 10px 2px 15px 15px;
	width: 95%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	border-radius: 2em 0px 0px 0px;
	border: 3px solid #ff8727;
}
 
.input {
	text-align: justify;
	line-height: 22px; /* Hauteur du texte */
	background-color: #fbfbfb;
	font-family: Verdana, Arial;
	font-size: 12px;
	font-weight: 500;
	color: #3c3c3c;
}
 
textarea {
	width: 100%;
	min-height: 220px;
	border-style: none;
	resize: vertical; /* Redimenssionnement QUE vertical */
	overflow: auto;
	overflow-x: hidden;
}
(...)

Merci, je trouve que cela rends bien. Je passe en résolu. ;-)