Como posso fazer uma largura TextArea 100% sem transbordar quando o preenchimento está presente em CSS?
https://stackoverflow.com/questions/271067
-
06-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPergunta
Eu tenho o seguinte CSS e HTML trecho que está sendo processado.
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>
O problema é que as extremidades da área de texto por ser 8px mais amplo (2px para a beira + 6px para preenchimento) do que o pai. Existe uma maneira de continuar a usar fronteira e estofamento, mas restringir o tamanho total do textarea à largura do pai?
Solução
Por que não? Esqueça os hacks e apenas fazê-lo com CSS?
Uma eu uso com frequência:
.boxsizingBorder {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
suporte ao navegador Veja aqui .
Outras dicas
A resposta para muitos problemas de formatação CSS parece ser "adicionar outro
Então, nesse espírito, você já tentou adicionar uma div wrapper para que a fronteira / preenchimento são aplicados e, em seguida, colocar o 100% de largura textarea dentro disso? Algo como (não testado):
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>
Vamos considerar o saída final prestado ao usuário do que queremos alcançar: a textarea preenchido com tanto uma borda e um preenchimento, cujas características são que ser clicado eles passam o foco para o nosso textarea , e a vantagem de um 100% automático largura típica de elementos de bloco.
A melhor abordagem na minha opinião é a utilização de soluções de baixo nível, tanto quanto possível, para alcançar o máximo apoio navegadores. Neste caso, a única HTML poderia funcionar bem, evitando o uso de Javascript (que de qualquer forma que todos nós amamos).
A etiqueta LABEL vem em nossa ajuda, porque tem esse tipo de comportamento e está autorizado a conter os elementos de entrada deve abordar a. Seu estilo padrão é o um dos elementos inline, assim, dando ao rótulo um estilo de exibição de blocos podemos nos valer do automática 100% de largura, incluindo o preenchimento e fronteiras, enquanto o textarea interior tem nenhuma fronteira, nenhum preenchimento e uma largura de 100% .
Tendo um olhar para o W3C especificidades outras vantagens podemos observar são:
- não "" é necessário atributo: quando uma tag LABEL contém a entrada de destino, centra-se automaticamente a entrada da criança quando clicado;
- Se um rótulo externo para o textarea já foi concebido, nenhum conflito ocorrer, uma vez que uma dada entrada pode ter uma ou mais etiquetas.
Consulte W3C especificidades para obter mais informações detalhadas.
Um exemplo simples:
<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>
O preenchimento e borda dos elementos .textareaContainer são os que querem dar ao textarea. Tente editá-los para denominá-lo como quiser. Eu dei grande e visível preenchimento e fronteiras para o elemento .textareaContainer para deixá-lo ver o seu comportamento quando clicado.
Se você não está muito preocupado com a largura do preenchimento, esta solução vai realmente manter o estofamento em percentagens também ..
textarea
{
border:1px solid #999999;
width:98%;
margin:5px 0;
padding:1%;
}
Não é perfeito, mas você vai ter algum estofamento e a largura acrescenta-se a 100% por isso tudo é bom
me deparei com uma outra solução aqui que é tão simples: add padding-right para o recipiente do textarea. Isso mantém a margem, borda e preenchimento no textarea, o que evita o problema que Beck apontou sobre o destaque foco que cromo e colocar safari em torno da área de texto.
padding-right do recipiente deve ser a soma da efetiva margem, borda e preenchimento de ambos os lados do textarea, além de qualquer preenchimento que você pode de outra maneira quer para o recipiente. Assim, para o caso da pergunta original:
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>
Esse código funciona para mim com o IE8 e Firefox
<td>
<textarea style="width:100%" rows=3 name="abc">Modify width:% accordingly</textarea>
</td>
Você pode fazer uso da propriedade de dimensionamento de caixa, que é suportado por todos os principais navegadores padrão-compliant e IE8 +. Você ainda precisará de uma solução alternativa para IE7 embora. Leia mais aqui .
Não, você não pode fazer isso com CSS. Essa é a razão Microsoft inicialmente introduzido um outro, e talvez mais práticos modelo de caixa . O modelo de caixa que acabou por ganhar, torna inpractical para misturar percentagens e unidades.
Eu não acho que é OK com você para expressar preenchimento e fronteiriças larguras em percentagem do pai também.
Eu estava procurando por uma solução de styling em linha em vez de solução de CSS, e este é o melhor que eu posso ir para um textarea responsivo:
<div style="width: 100%; max-width: 500px;">
<textarea style="width: 100%;"></textarea>
</div>
Se você pad e compensar assim:
textarea
{
border:1px solid #999999;
width:100%;
padding: 7px 0 7px 7px;
position:relative; left:-8px; /* 1px border, too */
}
O lado direito do textarea alinha perfeitamente com o lado direito do recipiente, e o texto dentro das alinha textarea perfeitamente com o corpo do texto no recipiente ... eo lado esquerdo do textarea 'destaca' um pouco. às vezes é mais bonita.
Use caixa de dimensionamento propriedade :
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
Isso vai ajudar
Para as pessoas que usam Bootstrap, textarea.form-controle pode levar a textarea problemas de dimensionamento também. Chrome e Firefox parecem usar diferentes alturas com o seguinte CSS Bootstrap:
textarea.form-conrtol{
height:auto;
}
Como cerca de margens negativas?
textarea {
border:1px solid #999999;
width:100%;
margin:5px -4px; /* 4px = border+padding on one side */
padding:3px;
}
Muitas vezes eu corrigir esse problema com calc(). Você apenas dar o textarea uma largura de 100% e uma certa quantidade de preenchimento, mas você tem que subtrair do total esquerda e estofamento direita do 100% largura você tem dado para o textarea:
textarea {
border: 0px;
width: calc(100% -10px);
padding: 5px;
}
Ou se você quiser dar o textarea uma borda:
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>
