Wie kann ich eine Textarea 100% Breite machen, ohne überzulaufen, wenn padding in CSS vorhanden ist?

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

  •  06-07-2019
  •  | 
  •  

Frage

Ich habe folgendes CSS und HTML-Schnipsel gemacht zu werden. 

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>

Ist das Problem ist, dass der Textbereich endet als 8px breite (2px für Grenz + 6px für padding) als die Eltern. Gibt es eine Möglichkeit, um fortzufahren Grenze und Polsterung zu verwenden, aber die Gesamtgröße des textarea auf die Breite der Eltern beschränken?

War es hilfreich?

Lösung

Warum nicht? Vergessen Sie die Hacks und tun es nur mit CSS?

Ein verwende ich häufig: 

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

Siehe Browser-Unterstützung hier .

Andere Tipps

Die Antwort auf viele CSS-Formatierung Probleme scheint „eine andere hinzufügen

“ zu sein

Also, in diesem Sinne, haben Sie versucht, einen Wrapper div Zugabe zu dem die Grenz / padding angewendet werden und dann innerhalb von, dass die 100% Breite TextArea- setzen? So etwas wie (nicht getestet): 

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>

Betrachten wir die Endausgabe den Nutzer verfügbar von dem, was wir erreichen wollen: ein gepolstertes TextArea- sowohl mit einem Rand und einer Polsterung, die Eigenschaften sind, dass sie den Fokus auf unsere TextArea- passieren geklickt wird und der Vorteil einer automatischen 100% Breite typisch von Blockelementen.

Der beste Ansatz meiner Meinung nach ist niedriges Niveau Lösungen so weit wie möglich zu verwenden, der maximale Browser zu erreichen unterstützen. In diesem Fall könnte die einzige HTML funktionieren, die Vermeidung der Verwendung von Javascript (was sowieso wir alle lieben).

Der LABEL-Tag kommt in unsere Hilfe, weil ein solches Verhalten hat und erlaubt ist, die Eingangselemente zu enthalten, diese auszuräumen, müssen. Sein Standardstil ist die eine der Inline-Elemente, so geben, auf das Etikett eines Block Anzeigeart können wir sie die automatischen 100% Breite einschließlich Polsterung und Grenzen in Anspruch nehmen, während die innere TextArea- hat keine Grenze, keine Polsterung und eine Breite von 100% .

Ein Blick auf den W3C-Spezifika andere Vorteile können wir feststellen, sind:

  • no „für“ Attribut ist erforderlich: Wenn ein LABEL-Tag die Zieleingabe enthält, fokussiert es automatisch das Kind Eingang, wenn darauf geklickt;
  • , wenn ein externes Label für das Textfeld bereits entwickelt wurde, keine Konflikte auftreten, da eine gegebene Eingabe kann eine oder mehr Etiketten.

Siehe W3C Spezifika für mehr detaillierte Informationen.

Einfaches Beispiel: 


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

Die Polsterung und Grenze der .textareaContainer Elemente sind die, die wir auf das Textfeld geben wollen. Versuchen Sie Bearbeiten sie die Art, wie Sie wollen. Ich habe große und sichtbare Polsterung und grenzt im .textareaContainer Elemente lassen Sie ihr Verhalten sehen, wenn darauf geklickt.

Wenn Sie sich über die Breite der Polsterung nicht zu stören sind, dann wird diese Lösung tatsächlich die Polsterung hält auch in Prozent .. 

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

Nicht perfekt, aber Sie werden etwas Padding erhalten und die Breite fügt bis zu 100% so alles gut

Ich kam in einer anderen Lösung hier dass so einfach: padding-right hinzufügen zu den Behälter TextArea-. Dies hält den Rand, Rahmen und Polsterung auf dem Textfeld, das das Problem vermeidet, dass Beck über den Fokus Highlight wies darauf hin, dass rund um das Textfeld setzen Chrome und Safari.

Die padding-right sollte der Behälter die Summe der effektiven Marge, Rahmen und Polsterung auf beiden Seiten des Textarea, zuzüglich padding Sie können sonst für den Container soll. Also, für den Fall in der ursprünglichen Frage: 

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>

Dieser Code funktioniert für mich mit IE8 und Firefox 

<td>
    <textarea style="width:100%" rows=3 name="abc">Modify width:% accordingly</textarea>
</td>

Sie können den kasten Leimungseigenschaft machen, ist es von allen wichtigen Standard-kompatiblen Browsern und IE8 + unterstützt wird. Sie werden nach wie vor, obwohl eine Abhilfe für IE7 benötigen. Lesen Sie mehr hier .

Nein, Sie können das nicht mit CSS. Das ist der Grund Microsoft zunächst eine andere eingeführt, und vielleicht praktischer Boxmodell . Das Box-Modell, das schließlich gewann, macht es inpractical Prozent und Einheiten zu mischen.

Ich glaube nicht, es in Ordnung ist mit Ihnen Polsterung und Rahmenbreiten in Prozent des Mutter auch zum Ausdruck bringen.

Ich war auf der Suche nach einer Inline-Styling-Lösung anstelle von CSS-Lösung, und das ist das Beste, was ich für eine ansprechende TextArea- gehen kann: 

<div style="width: 100%; max-width: 500px;">
  <textarea style="width: 100%;"></textarea>
</div>

Wenn Sie Pad und versetzt es wie folgt aus: 

textarea
{
    border:1px solid #999999;
    width:100%;
    padding: 7px 0 7px 7px; 
    position:relative; left:-8px; /* 1px border, too */
}

die rechte Seite des Textfeldes paßt perfekt mit der rechten Seite des Behälters, und der Text in dem Textfeld paßt perfekt mit dem Textkörper in dem Behälter ... und die linken Seite der Textarea ‚ragt‘ ein wenig. manchmal ist es schöner.

Verwenden Sie Box Leimungseigenschaft : 

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

Das wird helfen,

Für Menschen, die Bootstrap verwenden, textarea.form-Steuerung kann auch auf TextArea- Sizing Problemen führen. Chrome und Firefox erscheinen unterschiedliche Höhen mit der folgenden Bootstrap CSS zu verwenden: 

textarea.form-conrtol{
    height:auto;
}

Wie wäre negative Margen? 

textarea {
    border:1px solid #999999;
    width:100%;
    margin:5px -4px; /* 4px = border+padding on one side */
    padding:3px;
}

Ich fixiere oft das Problem mit calc(). Sie geben nur das Textfeld eine Breite von 100% und eine bestimmte Menge an Polsterung, aber Sie haben die gesamte linke und rechte Polsterung der Breite von 100% Sie das Textfeld gegeben haben, subtrahieren: 

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

Oder wenn Sie das Textfeld eine Grenze geben: 

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>

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top