largura do textarea do opa - css, twitter-bootstrap, textarea, opa

Eu estou usando bootstrap e opa para exibir uma área de texto, e eu não consegui abranger minha textarea sobre toda a largura da tela.

Eu estou usando o seguinte código simples:

import stdlib.themes.bootstrap;
import stdlib.widgets.bootstrap;

WB = WBootstrap;

textInput = <textarea style="width=30%" rows=30> This is a text area </textarea>
text2Input = <textarea style="width=100%" rows=1> another textarea </textarea>


content = WB.Grid.row([{span:4, offset:none, content: text2Input}]) <+>
WB.Grid.row([{span:16, offset:none, content: textInput}])



Server.start(
Server.http,
[
{page: function() {content}, title: "test" }
]
)

Eu também tento usar o seguinte css:

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

Mas não funciona também.

Parece que o WBoostrap substitui todas as minhas alterações. O estilo "largura: 100%" não aparece no xhtml gerado por opa.

Qual é a maneira correta de fazer isso?

obrigado

Respostas:

Bem, existem vários problemas no seu código:

• Primeiro, há um erro de digitação: é style="width:100%"

• Em segundo lugar, o Twitter Bootstrap 2.0 tem agora 12 colunas de largura, span16 não tem sentido, você pode escrever span12 no máximo (se você olhou http://bootstrap.opalang.org, diz até 16 porque foi escrito para BS <= 1.4

• Terceiro, onde você escreveu CSS? Se estiver diretamente em Opa (css = ...), é de fato substituído por Bootstrap CSS (já que o Opa CSS será incluído antes de todos os outros recursos), então você provavelmente precisará incluir um CSS externo (você pode ter um Olhe para a https://github.com/Aqua-Ye/OpaChat)

• Finalmente, WBootstrap.Grid realmente não parece ser adaptado para fazer 100% de elementos de largura.