8

Quero usar uma <textarea>, mas em vez de usar rows="4" cols="100", queria usar algo deste gênero: style="width: 80%" para que o layout fique responsivo. Mas uma vez que isto não funciona, ou seja, usa-se o tamanho a 80% mas não fica responsive, como posso solucionar o problema? Nota: estou a usar uma framework que vinha no template.

Segue o exemplo: http://jsfiddle.net/ndQKL/1/

Atenção, o jsfiddle.net faz com que a textarea fique responsive. Se aplicar numa página em branco não fica.

9
  • Poste seu código, se for possível no jsfiddle.net Commented 14/02/2014 às 12:16
  • 2
    Olha, isso funciona sim. Deve ter algum outro erro que está cometendo. Editado: vi aqui. Ele está funcionando. A única coisa que falta é usar media queries para definir os pontos de quebra, caso realmente queira pontos diferentes. O que você entende como responsive? Commented 14/02/2014 às 12:19
  • já editei o post
    – pc_oc
    Commented 14/02/2014 às 12:19
  • fica responsive devido ao jsfiddle.net, mas se tentar aplicar numa janela em branco não fica
    – pc_oc
    Commented 14/02/2014 às 12:21
  • Ah, seu problema é que deve estar usando um framework de CSS, como Twitter boostrap, mas não está sobrescrevendo corretamente o CSS. É simples a resposta. Confirme se está usando um framework. Commented 14/02/2014 às 12:23

4 Respostas 4

8

Eu faço assim (Usando o Bootstrap):

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

  width: 100%;
}
<div class="span9">
  <textarea></textarea>
</div>

2

Este erro ocorre porque, ao usar um framwork de CSS, como Twitter boostrap, tal framework especifica a largura e altura de elementos como text e textarea.

Neste caso, depois de aplicar sua alteração com CSS, você deveria usar um inspetor, como Firebug ou DevTools para ver se o seletor CSS tem especificidade suficiente.

O código postado até então não dá ideia exata de aonde o problema está, mas ajustando a especificidade do seletor e sobrescrevendo o padrão de sua biblioteca de CSS isso irá resolver seu problema.

Dois modos mais simples de aumentar a especificidade é, para classe que que seu textarea possui ou a própria tag textarea, adicionar após o width: 80% um !important ou prefixar o seletor com um um elemento com ID.

textarea {
  width: 80% !important; /* Idealmente !important deve ser evitado */
}

No caso da outra solução

#algumid textarea {
   width: 80%;
}

Especificidade de CSS

Uma ajuda rapida sobre isso pode ser vista em http://www.maujor.com/tutorial/especificidade.php

CÁLCULOS:

1°.-) Conte o número (quantidade) de atributos id no seletor;

2°.-) Conte o número (quantidade) de atributos classe no seletor;

3°.-) Conte o número (quantidade) de tag's HTML no seletor;

4°.-) Escreva os números obtidos, da esquerda para a direitae na mesma ordem em que foram levantados (id,classe,tag).

Havendo empate na pontuação vale o efeito cascata a última regra declarada prevalece.

Tem outros detalhes além disso sobre especificidade de seletor para critérios de desempate

1
  • Quem deu -1 pode explicar o motivo? Commented 15/02/2014 às 21:42
0

A aplicação do estilo ao tag textarea está correcta. É por isso que funciona no Fiddler. Se não funciona na sua página, isso significa que há outros estilos que se estão a sobrepor a esse.

Para saber o que se passa, o mais simples é abrir a sua página no Chrome. Instale os Developer Tools se for preciso. Depois faça click-direito sobre a sua textarea, e escolha Inspect Element, e os Developer Tools abrem-se. Do lado direito tem o painel Styles, e aí pode ver que estilos estão ao ser aplicados a este tag, e porque é que o seu tag não funciona como quer.

0

Aconselho você fazer estilização sempre no arquivo de estilos (.css, .scss, etc) e não inline ou incorporado.

Tente assim:

  1. Remova o style que esta inline do textarea;
  2. Use esse css:
#desc_pt{
    width: 80% !important;
}

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .