Comment créer une largeur de TextArea 100% sans déborder lorsqu'un remplissage est présent dans CSS?
J'ai l'extrait CSS et HTML suivant en cours de rendu.
textarea
{
border:1px solid #999999;
width:100%;
margin:5px 0;
padding:3px;
}<div style="display: block;" id="rulesformitem" class="formitem">
<label for="rules" id="ruleslabel">Rules:</label>
<textarea cols="2" rows="10" id="rules"/>
</div>Le problème est que la zone de texte finit par être 8px plus large (2px pour border + 6px pour le remplissage) que le parent. Existe-t-il un moyen de continuer à utiliser border et padding tout en limitant la taille totale de textarea à la largeur du parent?
Pourquoi pas? Oubliez les hacks et faites-le simplement avec CSS?
J'utilise fréquemment:
.boxsizingBorder {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Voir support du navigateur ici .
La réponse à de nombreux problèmes de formatage CSS semble être "ajoutez un autre <div>!"
Donc, dans cet esprit, avez-vous essayé d'ajouter un div wrapper auquel les bordures/marges sont appliquées, puis de placer le texte à 100% de largeur à l'intérieur? Quelque chose comme (non testé):
textarea
{
width:100%;
}
.textwrapper
{
border:1px solid #999999;
margin:5px 0;
padding:3px;
}<div style="display: block;" id="rulesformitem" class="formitem">
<label for="rules" id="ruleslabel">Rules:</label>
<div class="textwrapper"><textarea cols="2" rows="10" id="rules"/></div>
</div>considérons la sortie finale restituée à l'utilisateur de ce que nous souhaitons obtenir: une zone de texte matelassée comportant à la fois une bordure et une marge, dont les caractéristiques sont cet être cliqué, ils transmettent le focus à notre zone de texte et l’avantage d’une largeur automatique de 100% typique des éléments de bloc.
La meilleure approche, à mon avis, consiste à utiliser autant que possible des solutions de bas niveau pour atteindre le maximum de support possible des navigateurs. Dans ce cas, le seul code HTML pourrait fonctionner correctement, en évitant l'utilisation de Javascript (que nous aimons tous de toute façon).
La balise LABEL vient dans notre aide car elle a un tel comportement et est autorisée à contenir les éléments d’entrée auxquels elle doit s’adresser. Son style par défaut est celui des éléments en ligne. Ainsi, en attribuant à l'étiquette un style d'affichage par blocs, nous pouvons utiliser la largeur automatique à 100%, y compris le remplissage et les bordures, tandis que la zone de texte intérieure n'a pas de bordure, pas de remplissage et une largeur de 100%. .
En regardant les spécificités du W3C, nous remarquons peut-être d'autres avantages:
- aucun attribut "for" n'est nécessaire: lorsqu'une balise LABEL contient l'entrée cible, elle concentre automatiquement l'entrée enfant lorsque l'utilisateur clique dessus;
- si une étiquette externe pour la zone de texte a déjà été conçue, aucun conflit ne se produit car une entrée donnée peut avoir une ou plusieurs étiquettes.
Voir spécificités du W3C pour plus d'informations.
Exemple simple:
.container {
width: 400px;
border: 3px
solid #f7c;
}
.textareaContainer {
display: block;
border: 3px solid #38c;
padding: 10px;
}
textarea {
width: 100%;
margin: 0;
padding: 0;
border-width: 0;
}<body>
<div class="container">
I am the container
<label class="textareaContainer">
<textarea name="text">I am the padded textarea with a styled border...</textarea>
</label>
</div>
</body>Le remplissage et la bordure des éléments .textareaContainer sont ceux que nous voulons donner à textarea. Essayez de les éditer pour avoir le style que vous voulez. J'ai donné un remplissage et des bordures larges et visibles à l'élément .textareaContainer pour vous permettre de voir leur comportement lorsque vous cliquez dessus.
Si vous n'êtes pas trop préoccupé par la largeur du rembourrage, cette solution le conservera aussi en pourcentage.
textarea
{
border:1px solid #999999;
width:98%;
margin:5px 0;
padding:1%;
}
Pas parfait, mais vous obtiendrez un peu de rembourrage et la largeur totalise 100%, donc tout va bien
Je suis tombé sur une autre solution ici qui est si simple: ajoutez padding-right au conteneur de textarea. Cela conserve la marge, la bordure et le remplissage sur la zone de texte, ce qui évite le problème signalé par Beck à propos de la mise en surbrillance du focus que chrome et du safari placé autour de la zone de texte.
Le droit de remplissage du conteneur doit correspondre à la somme de la marge effective, de la bordure et du remplissage des deux côtés de la zone de texte, ainsi que de tout remplissage souhaité par le conteneur. Donc, pour le cas dans la question initiale:
textarea{
border:1px solid #999999;
width:100%;
margin:5px 0;
padding:3px;
}
.textareacontainer{
padding-right: 8px; /* 1 + 3 + 3 + 1 */
}
<div class="textareacontainer">
<textarea></textarea>
</div>
Ce code fonctionne pour moi avec IE8 et Firefox
<td>
<textarea style="width:100%" rows=3 name="abc">Modify width:% accordingly</textarea>
</td>
Vous pouvez utiliser la propriété box-sizing, qui est prise en charge par tous les principaux navigateurs conformes à la norme et IE8 +. Vous aurez néanmoins besoin d'une solution de contournement pour IE7. Lire la suite ici .
Je recherchais une solution de style en ligne au lieu d'une solution CSS, et voici ce que je peux faire de mieux pour un texte réactif:
<div style="width: 100%; max-width: 500px;">
<textarea style="width: 100%;"></textarea>
</div>
Non, vous ne pouvez pas faire cela avec CSS. C’est la raison pour laquelle Microsoft en a initialement introduit un autre, et peut-être plus pratique modèle de boîte . Le modèle de boîte qui a finalement été remporté rend peu pratique le mélange des pourcentages et des unités.
Je ne pense pas que vous puissiez aussi exprimer le remplissage et la largeur des bordures en pourcentage par rapport au parent.
Pour les utilisateurs de Bootstrap, textarea.form-control peut également entraîner des problèmes de dimensionnement de textarea. Chrome et Firefox semblent utiliser différentes hauteurs avec le Bootstrap CSS suivant:
textarea.form-conrtol{
height:auto;
}
Si vous appuyez et décalez comme ceci:
textarea
{
border:1px solid #999999;
width:100%;
padding: 7px 0 7px 7px;
position:relative; left:-8px; /* 1px border, too */
}
le côté droit du textarea s'aligne parfaitement sur le côté droit du conteneur, et le texte à l'intérieur du textarea s'aligne parfaitement avec le corps du texte dans le conteneur ... et le côté gauche du textarea 'colle un peu. c'est parfois plus joli.
Je répare souvent ce problème avec calc(). Vous donnez simplement à la zone de texte une largeur de 100% et une certaine quantité de remplissage, mais vous devez soustraire le remplissage total à gauche et à droite de la largeur de 100% que vous avez donnée à la zone de texte:
textarea {
border: 0px;
width: calc(100% -10px);
padding: 5px;
}
Ou si vous voulez donner une bordure à textarea:
textarea {
border: 1px;
width: calc(100% -12px); /* plus the total left and right border */
padding: 5px;
}
Utilisez propriété de taille de boîte :
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
Ça va aider
* {
box-sizing: border-box;
}
.container {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
input[type=text], select, textarea{
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
resize: vertical;
}<div class="container">
<div class="row">
<label for="name">Name</label>
<input type="text" id="name" name="name" placeholder="Your name..">
</div>
<div class="row">
<label for="country">Country</label>
<select id="country" name="country">
<option value="australia">UK</option>
<option value="canada">USA</option>
<option value="usa">RU</option>
</select>
</div>
<div class="row">
<label for="subject">Subject</label>
<textarea id="subject" name="subject" placeholder="Write something.." style="height:200px"></textarea>
</div>
</div>Qu'en est-il des marges négatives?
textarea {
border:1px solid #999999;
width:100%;
margin:5px -4px; /* 4px = border+padding on one side */
padding:3px;
}