Comment créer une largeur de TextArea 100% sans déborder lorsque le remplissage est présent dans CSS?

StackOverflow https://stackoverflow.com/questions/271067

  •  06-07-2019
  •  | 
  •  

Question

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 plus large de 8 pixels (2 pixels pour la bordure + 6 pixels pour le remplissage) que le parent. Existe-t-il un moyen de continuer à utiliser border et padding tout en limitant la taille totale du textarea à la largeur du parent?

Était-ce utile?

La solution

Pourquoi pas? Oubliez les hacks et faites-le simplement avec CSS?

Celui que j'utilise fréquemment: 

.boxsizingBorder {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

Voir le support du navigateur ici .

Autres conseils

La réponse à de nombreux problèmes de mise en forme CSS semble être & Ajouter un autre < div >!! & ";

Alors, 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 avec une bordure et une marge, les caractéristiques étant que lorsque vous cliquez dessus, elles passent au centre de notre zone de texte. et l’avantage d’une largeur automatique à 100% typique des éléments de bloc.

À mon avis, la meilleure approche consiste à utiliser autant que possible des solutions de bas niveau, afin d’obtenir la prise en charge maximale 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 examinant les spécificités du W3C, nous pouvons remarquer d’autres avantages:

  • non " pour " Un attribut est nécessaire: lorsqu'une balise LABEL contient l'entrée cible, elle fait automatiquement en sorte que l'entrée enfant soit automatiquement activée 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 W3C pour plus d'informations. informations détaillées.

Exemple simple: 


<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 des éléments .textareaContainer sont ceux que nous souhaitons attribuer à la zone de texte. 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 remplissage, cette solution conservera également le remplissage en pourcentage. 

textarea
{
    border:1px solid #999999;
    width:98%;
    margin:5px 0;
    padding:1%;
}

Ce n'est pas parfait, mais vous obtiendrez un peu de rembourrage et la largeur est égale à 100%, donc c'est tout bon

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 de la zone de texte, ce qui évite le problème signalé par Beck à propos de la mise en surbrillance que chrome et le safari mettent 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, plus tout remplissage éventuel du 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 +. Cependant, vous aurez toujours besoin d'une solution de contournement pour IE7. Lisez-en plus ici .

Non, vous ne pouvez pas faire cela avec CSS. C’est la raison pour laquelle Microsoft a initialement introduit un autre modèle de boîtier . 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.

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>

Si vous le réglez 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 du texte est parfaitement aligné sur le côté droit du conteneur, et le texte à l'intérieur du texte est parfaitement aligné sur le corps du texte dans le conteneur ... et le côté gauche du texte textarea 'dépasse' un peu. c'est parfois plus joli.

Utilisez la propriété de dimensionnement de la boîte : 

-moz-box-sizing:border-box; 
-webkit-box-sizing:border-box; 
box-sizing:border-box;

Cela aidera

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 CSS Bootstrap suivant: 

textarea.form-conrtol{
    height:auto;
}

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;
}

Je répare souvent ce problème avec calc(). Vous devez simplement donner à 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 attribuée à la zone de texte: 

textarea {
    border: 0px;
    width: calc(100% -10px);
    padding: 5px; 
}

Ou si vous souhaitez attribuer 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>

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top