Come posso creare una larghezza TextArea del 100% senza traboccare quando è presente il riempimento nei CSS?

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

  •  06-07-2019
  •  | 
  •  

Domanda

Ho il seguente frammento CSS e HTML in fase di rendering.

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>

Il problema è che l'area di testo finisce per essere 8px più larga (2px per il bordo + 6px per il riempimento) rispetto al genitore.Esiste un modo per continuare a utilizzare il bordo e il riempimento ma limitare la dimensione totale del file textarea alla larghezza del genitore?

È stato utile?

Soluzione

Perché no? Dimenticare gli hack e farlo con i CSS?

Uno che uso frequentemente: 

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

Consulta il supporto del browser qui .

Altri suggerimenti

La risposta a molti problemi di formattazione CSS sembra essere "aggiungi un altro <div>!"

Quindi, in questo spirito, hai provato ad aggiungere un div wrapper a cui vengono applicati il ​​bordo/il riempimento e quindi a inserire l'area di testo con larghezza del 100% al suo interno?Qualcosa del tipo (non testato):

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>

consideriamo il output finale reso all'utente di ciò che vogliamo ottenere: una textarea imbottita con un bordo e un padding, le cui caratteristiche sono che quando si fa clic passano il focus sulla nostra textarea e il vantaggio di una larghezza automatica del 100% tipica degli elementi a blocchi.

L'approccio migliore secondo me è quello di utilizzare soluzioni di basso livello per quanto possibile, per raggiungere il massimo supporto dei browser. In questo caso l'unico HTML potrebbe funzionare bene, evitando l'uso di Javascript (che comunque amiamo tutti).

Il tag LABEL viene in nostro aiuto perché ha tale comportamento e può contenere gli elementi di input a cui deve rivolgersi. Il suo stile predefinito è quello degli elementi in linea, quindi, dando all'etichetta uno stile di visualizzazione a blocchi possiamo avvalerci della larghezza automatica al 100% che include imbottitura e bordi, mentre l'area di testo interna non ha bordi, nessuna imbottitura e una larghezza del 100% .

Dando un'occhiata alle specifiche del W3C, altri vantaggi che possiamo notare sono:

  • no " per " è necessario l'attributo: quando un tag LABEL contiene l'input target, focalizza automaticamente l'input figlio quando viene cliccato;
  • se è già stata progettata un'etichetta esterna per l'area di testo, non si verificano conflitti, poiché un determinato input può avere una o più etichette.

Vedi W3C specifics per ulteriori informazioni informazioni dettagliate.

Esempio semplice: 


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

Il padding e il bordo degli elementi .textareaContainer sono quelli che vogliamo dare alla textarea. Prova a modificarli per modellarlo come desideri. Ho fornito un'imbottitura ampia e visibile e bordi all'elemento .textareaContainer per farti vedere il loro comportamento quando si fa clic.

Se non ti preoccupi troppo della larghezza dell'imbottitura, questa soluzione manterrà effettivamente anche l'imbottitura in percentuale. 

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

Non perfetto, ma otterrai un'imbottitura e la larghezza si aggiunge al 100%, quindi va tutto bene

Ho trovato un'altra soluzione qui che è così semplice: aggiungi padding-right nel contenitore della textarea. Ciò mantiene il margine, il bordo e l'imbottitura nell'area di testo, evitando il problema che Beck ha sottolineato sull'evidenziazione del focus che Chrome e Safari mettono intorno all'area di testo.

L'imbottitura del contenitore a destra dovrebbe essere la somma del margine, del bordo e dell'imbottitura effettivi su entrambi i lati dell'area di testo, più l'eventuale imbottitura che altrimenti si potrebbe desiderare per il contenitore. Quindi, per il caso nella domanda originale: 

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>

Questo codice funziona per me con IE8 e Firefox 

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

È possibile utilizzare la proprietà di ridimensionamento delle caselle, supportata da tutti i principali browser conformi agli standard e IE8 +. Avrai comunque bisogno di una soluzione alternativa per IE7. Ulteriori informazioni qui .

No, non puoi farlo con CSS. Questo è il motivo per cui Microsoft ha inizialmente introdotto un altro, e forse più pratico modello di scatola . Il modello a scatola che alla fine ha vinto, rende poco pratico mescolare percentuali e unità.

Non credo sia giusto per te esprimere anche il riempimento e la larghezza dei bordi in percentuale del genitore.

Stavo cercando una soluzione di styling in linea anziché una soluzione CSS, e questa è la migliore che posso fare per una textarea reattiva: 

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

Se lo pad e lo offset in questo modo: 

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

il lato destro dell'area di testo si allinea perfettamente con il lato destro del contenitore, e il testo all'interno dell'area di testo si allinea perfettamente con il corpo del testo nel contenitore ... e il lato sinistro del textarea "sporge" un po '. a volte è più bello.

Utilizza proprietà di ridimensionamento della casella : 

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

Questo aiuterà

Per le persone che usano Bootstrap, textarea.form-control può portare anche a problemi di dimensionamento di textarea. Chrome e Firefox sembrano utilizzare altezze diverse con il seguente CSS Bootstrap: 

textarea.form-conrtol{
    height:auto;
}

Che ne dici di margini negativi? 

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

Risolvo spesso quel problema con calc(). Devi solo dare alla textarea una larghezza del 100% e una certa quantità di riempimento, ma devi sottrarre la spaziatura totale sinistra e destra della larghezza del 100% che hai dato alla textarea: 

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

O se vuoi dare un bordo alla textarea: 

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>

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top