opa textarea width

Question

I'm using bootstrap and opa to display a textarea, and I don't manage to span my textarea over all the screen width.

I'm using the following simple code :

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

I also try to use the following css :

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

But it doesn't work either.

It seems that WBoostrap override all my change. The "width:100%" style doesn't appear in the xhtml generated by opa.

What is the correct way for doing that ?

Thanks

score 1 · Accepted Answer · answered Apr 30 '12 at 21:28

Well there are multiple problems in your code :

First, there is a typo : it is style="width:100%"
Second, Twitter Bootstrap 2.0 is now 12 columns width, so span16 has no meaning, you can write span12 at most (if you looked at http://bootstrap.opalang.org, it says up to 16 because it was written for BS <= 1.4)
Third, where did you write you CSS ? If it's directly in Opa (css = ...), it is indeed overwritten by Bootstrap CSS (since Opa CSS will be included before all other resources), so you will probably need to include an external CSS (you can have a look at https://github.com/Aqua-Ye/OpaChat)
Finally, WBootstrap.Grid does not really seem to be adapted to make 100% width elements.

opa textarea width

1 Answers1