TEXTAREA padding bottom inexistant sur Chrome

Version imprimable

1 pièce(s) jointe(s)

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

Pièce jointe 330421

Voici une partie HTML/CSS :
Code:

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:

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é ? :weird:

27/11/2017, 15h58
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>.
27/11/2017, 16h03
Casio

Donc, faire un DIV autour du textarea ?
27/11/2017, 16h12
NoSmoking
Oui une <div> cadre, par exemple
Code:

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.

1 pièce(s) jointe(s)

Voici mon résultat :

Pièce jointe 330493

Et le code correspondant :

Code:

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:

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