1. #1
    Membre du Club Avatar de Casio
    Homme Profil pro
    Historien numérique
    Inscrit en
    novembre 2005
    Messages
    177
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 41
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Historien numérique
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : novembre 2005
    Messages : 177
    Points : 50
    Points
    50

    Par défaut TEXTAREA padding bottom inexistant sur Chrome

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

    Nom : Capture d'e?cran 2017-11-26 20.09.51.png
Affichages : 30
Taille : 86,5 Ko

    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é ?
    Digital self-made Man - OnLine since 1993.
    http://wda-fr.org - http://mathieu.charreyre.net

  2. #2
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    11 996
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 11 996
    Points : 32 133
    Points
    32 133

    Par défaut

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

  3. #3
    Membre du Club Avatar de Casio
    Homme Profil pro
    Historien numérique
    Inscrit en
    novembre 2005
    Messages
    177
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 41
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Historien numérique
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : novembre 2005
    Messages : 177
    Points : 50
    Points
    50

    Par défaut

    Donc, faire un DIV autour du textarea ?
    Digital self-made Man - OnLine since 1993.
    http://wda-fr.org - http://mathieu.charreyre.net

  4. #4
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    11 996
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 11 996
    Points : 32 133
    Points
    32 133

    Par défaut

    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.

  5. #5
    Membre du Club Avatar de Casio
    Homme Profil pro
    Historien numérique
    Inscrit en
    novembre 2005
    Messages
    177
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 41
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Historien numérique
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : novembre 2005
    Messages : 177
    Points : 50
    Points
    50

    Par défaut

    Voici mon résultat :

    Nom : Capture d'e?cran 2017-11-27 16.34.29.png
Affichages : 11
Taille : 97,8 Ko

    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. ;-)
    Digital self-made Man - OnLine since 1993.
    http://wda-fr.org - http://mathieu.charreyre.net

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Padding-bottom anormal sur mon body
    Par okoweb dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 27/06/2013, 17h55
  2. Site inexistant sur IE7
    Par hlcginfo dans le forum Mise en page CSS
    Réponses: 3
    Dernier message: 04/03/2008, 03h47
  3. Réponses: 2
    Dernier message: 11/10/2006, 12h21
  4. [W3C] pb de padding avec SPAN sur firefox
    Par idefaye dans le forum Balisage (X)HTML et validation W3C
    Réponses: 7
    Dernier message: 02/08/2006, 01h08
  5. [W3C] style="padding:4;" bien sur IE mais mauvaise sur FF
    Par H-bil dans le forum Balisage (X)HTML et validation W3C
    Réponses: 11
    Dernier message: 07/06/2006, 01h28

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo