CODEWITHSUNDEEP
ruby-on-rails-3twitter-bootstrap
Kichang Yang
Kichang Yang

Reputation: 913

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 %>

Upvotes: 65

Views: 115074

Answers (7)

PMK2029
PMK2029

Reputation: 141

I found the following in the site.css generated by VS2013

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
}

To override this behavior in a specific element, add the following...

 style="max-width: none;"

For example:

 <div class="col-md-6">
      <textarea style="max-width: none;" 
                class="form-control" 
                placeholder="a col-md-6 multiline input box" />
 </div>

Upvotes: 14

Peter Riley
Peter Riley

Reputation: 1

Another option is to split off the textarea in the Site.css as follows: 

/* Set width on the form input elements since they're 100% wide by default */

input,
select {

  max-width: 280px;
}

textarea {

  /*max-width: 280px;*/
  max-width: 500px;
  width: 280px;
  height: 200px;
}

also (in my MVC 5) add ref to textarea:

@Html.TextAreaFor(model => ................... @class = "form-control", @id="textarea"............

It worked for me

Upvotes: 0

Plippie
Plippie

Reputation: 2886

Simply add the bootstrap "row-fluid" class to the textarea. It will stretch to 100% width;

Update: For bootstrap 3.x use "col-xs-12" class for textarea;

Update II: Also if you want to extend the container to full width use: container-fluid class.

Upvotes: 17

Nick Albrecht
Nick Albrecht

Reputation: 16938

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.

Upvotes: 54

Alex Strickland
Alex Strickland

Reputation: 1614

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.

Upvotes: 80

Paul
Paul

Reputation: 71

I don't know if this is the correct way however I did this:

<div class="control-group">
  <label class="control-label" for="id1">Label:</label>
  <div class="controls">
    <textarea id="id1" class="textareawidth" rows="10" name="anyname">value</textarea>
  </div>
</div>

and put this in my bootstrapcustom.css file:

@media (min-width: 768px) {
    .textareawidth {
        width:500px;
    }
}
@media (max-width: 767px) {
    .textareawidth {

    }
}

This way it resizes based on the viewport. Seems to line everything up nicely on a big browser and on a small mobile device.

Upvotes: 7

Perry Horwich
Perry Horwich

Reputation: 2846

This works for me with twitter bootstrap 2 and simple_form 2.0.4
Result is a span6 text area in a span9 row 

 <div class="row" >
   <div class="span9">
     <%= f.input :some_text, :input_html => {:rows => 5, :placeholder => "Enter some text.", :class => "span6"}%>
   </div>
 </div>

Upvotes: 3

Related Questions