opa textarea width

Question

Я использую bootstrap и opa для отображения текстовой области, и мне не удается охватить текстовую область по всей ширине экрана.

Я использую следующий простой код:

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" }
   ]
)

Я также пытаюсь использовать следующий CSS:

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

Но это тоже не работает.

Кажется, что WBoostrap отменяет все мои изменения. Стиль "width:100%" не отображается в xhtml, созданном opa.

Как правильно это сделать?

Спасибо

Answer 1

Ну, есть несколько проблем в вашем коде:

• Во-первых, это опечатка: это style="width:100%"

• Во-вторых, Twitter Bootstrap 2.0 теперь имеет ширину 12 столбцов, поэтому span16 не имеет значения, вы можете написать span12 самое большее (если вы смотрели на http://bootstrap.opalang.org/, там написано до 16, потому что он был написан для BS <= 1.4)

• В-третьих, где вы написали свой CSS? Если он находится непосредственно в Opa (css = ...), он действительно перезаписывается Bootstrap CSS (так как Opa CSS будет включен раньше всех других ресурсов), поэтому вам, вероятно, потребуется включить внешний CSS (вы можете посмотреть на https://github.com/Aqua-Ye/OpaChat)

• В заключение, WBootstrap.Grid на самом деле, кажется, не приспособлен для создания элементов шириной 100%.