28172 sujets

CSS et mise en forme, CSS3

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

upload/1511723416-22165-capturedeacran2017-11-2620.09.png

Voici une partie HTML/CSS :

(...)
	<div>
		<textarea name="listing" class="input"><?php echo $contents; fclose($handle); ?></textarea>
		<input type="submit" value="MaJ du listing !" id="button" class="submit" />
	</div>
(...)


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 {
	height: 240px; /* Hauteur du bloc texte */
	resize: vertical; /* Redimenssionnement QUE vertical */
	overflow: auto;
    overflow-x: hidden;
}
(...)


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

Tu as donné au textarea une hauteur fixed, si tu ajoutes trop de contenu, il se peut que le conteneur déborde, peut-être essaie avec min-height.
Merci, je viens d'essayer, mais ça ne change rien.

(...)
textarea {
	min-height: 260px;
	resize: vertical; /* Redimenssionnement QUE vertical */
	overflow: auto;
    overflow-x: hidden;
}
(...)