Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I change cols of textarea in twitter-bootstrap?

If I change the value of :rows, it works. But it stays at the default cols whatever value I set with ':cols =>'. Column width won't change.

I viewed the html source and it reflected the change. I wonder that bootstrap's CSS might be the suspect...

HTML (there is a "cols=" in the final HTML, but column width stays at the default value, which is 30. I can't believe my eyes!)

<textarea cols="100" id="comment_body" name="comment[body]" rows="5"></textarea> 

Rails:

<%= form_for([@post, @post.comments.build]) do |f| %>   <div class="field">     <i class="icon-user"></i>     <%= f.text_field :commenter %>   </div>   <div class="field">     <i class="icon-comment"></i>     <%= f.text_area :body, :rows => 5, :cols => 100 %>   </div>   <div class="actions">     <%= f.submit %>   <div>  <% end %> 
like image 436
Kichang Yang Avatar asked Apr 13 '12 00:04

Kichang Yang


2 Answers

The other answers didn't work for me. This did:

    <div class="span6">       <h2>Document</h2>         </p>         <textarea class="field span12" id="textarea" rows="6" placeholder="Enter a short synopsis"></textarea>         <button class="btn">Upload</button>     </div> 

Note the span12 in a div with span6.

like image 81
Alex Strickland Avatar answered Oct 23 '22 18:10

Alex Strickland


UPDATE: As of Bootstrap 3.0, the input-* classes described below for setting the width of input elements were removed. Instead use the col-* classes to set the width of input elements. Examples are provided in the documentation.


In Bootstrap 2.3, you'd use the input classes for setting the width.

<textarea class="input-mini"></textarea> <textarea class="input-small"></textarea> <textarea class="input-medium"></textarea> <textarea class="input-large"></textarea> <textarea class="input-xlarge"></textarea> <textarea class="input-xxlarge"></textarea>​ <textarea class="input-block-level"></textarea>​ 

Do a find for "Control sizing" for examples in the documentation.

But for height I think you'd still use the rows attribute.

like image 21
Nick Albrecht Avatar answered Oct 23 '22 19:10

Nick Albrecht