Comment puis-je faire une largeur TextArea 100% sans déborder lorsque le 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 la bordure + 6px pour le remplissage) que le parent. Existe-t-il un moyen de continuer à utiliser border et padding mais de limiter la taille totale du textarea à la largeur du parent?
14 réponses
La réponse à de nombreux problèmes de formatage CSS semble être " ajouter un autre !"
Donc, dans cet esprit, avez-vous essayé d'ajouter un wrapper div auquel la bordure/le remplissage sont appliqués, puis de mettre le textarea 100% width à l'intérieur de cela? 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 rendue à l'utilisateur de ce que nous voulons réaliser: une zone de texte rembourrée avec à la fois une bordure et un rembourrage, quelles caractéristiques sont que lorsqu'on clique ils passent le focus à notre zone de texte, et l'avantage d'une largeur automatique à 100% typique des éléments de bloc.
La meilleure approche à mon avis est d'utiliser des solutions de bas niveau autant que possible, pour atteindre le maximum de support des navigateurs. Dans ce cas, le seul HTML pourrait fonctionner correctement, en évitant l'utilisation de Javascript (que de toute façon nous aimons tous).
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, donc, en donnant à l'étiquette un style d'affichage de bloc, nous pouvons nous prévaloir de la largeur automatique de 100%, y compris le remplissage et les bordures, tandis que la zone de texte interne n'a pas de bordure, pas de remplissage et une largeur de 100%.
Jeter un oeil aux spécificités du W3C autres avantages que nous pouvons avis sont:
- aucun attribut " for " n'est nécessaire: lorsqu'une balise LABEL contient l'entrée cible, elle focalise automatiquement l'entrée enfant lorsqu'elle est cliquée;
- 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 W3C spécificités pour de plus amples informations.
Exemple:
<html>
<head>
<style type="text/css">
.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; }
</style>
</head>
<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>
</html>
Le remplissage et la bordure du .éléments textareaContainer sont ceux que nous voulons donner au textarea. Essayez de les éditer pour le styliser comme vous le souhaitez. J'ai donné un grand rembourrage et des bordures visibles à la .élément textareaContainer pour vous permettre de voir leur comportement lorsque vous cliquez dessus.
Si vous n'êtes pas trop dérangé par la largeur du rembourrage, cette solution gardera également le rembourrage en pourcentages..
textarea
{
border:1px solid #999999;
width:98%;
margin:5px 0;
padding:1%;
}
Pas parfait, mais vous obtiendrez un peu de rembourrage et la largeur s'ajoute à 100%, donc tout va bien
Je suis tombé sur une autre solution ici qui est si simple: ajouter padding-right au conteneur de textarea. Cela maintient la marge, la bordure et le remplissage sur la zone de texte, ce qui évite le problème que Beck a souligné à propos de la mise au point que chrome et safari mettent autour de la zone de texte.
Le padding-right du conteneur doit être la somme de la marge effective, de la bordure et du padding des deux côtés de la zone de texte, plus tout remplissage que vous pourriez souhaiter pour le conteneur. Si, 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>
Non, vous ne pouvez pas le faire avec CSS. C'est la raison pour laquelle Microsoft a initialement introduit un autre modèle de boîte, et peut-être plus pratique . Le modèle de boîte qui a finalement gagné, le rend danspratique pour mélanger les pourcentages et les unités.
Je ne pense pas qu'il soit correct avec vous d'exprimer les largeurs de remplissage et de bordure en pourcentage du parent aussi.
Si vous le pad et le 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 de La textarea parfaitement aligné avec le côté droit du conteneur, et, le texte à l'intérieur de la zone de texte s'aligne parfaitement avec le corps du texte dans le conteneur... et le côté gauche du textarea "dépasse" un peu. il est parfois plus joli.
Utiliser boîte de dimensionnement de la propriété:
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
Cela aidera
Pour les personnes qui utilisent Bootstrap, textarea.le contrôle de formulaire peut également entraîner des problèmes de dimensionnement de textarea. Chrome et Firefox semblent utiliser des hauteurs différentes avec le CSS Bootstrap suivant:
textarea.form-conrtol{
height:auto;
}
Que diriez-vous des marges négatives?
textarea {
border:1px solid #999999;
width:100%;
margin:5px -4px; /* 4px = border+padding on one side */
padding:3px;
}
Je règle 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 droit 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 à la zone de texte:
textarea {
border: 1px;
width: calc(100% -12px); /* plus the total left and right border */
padding: 5px;
}
* {
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>