Foundation, simple form, text area, columns

Question

I have a Zurb Foundation simple form with one field (:description) being a text area. I want the text area to be 10 rows deep but it appears as 2 rows. Anyone know how to change this?

<div class="row">
  <div class="large-4 large-centered columns">
    <%= simple_form_for(@venue) do |f| %>
      <fieldset>
        <%= f.input :name %>
        <%= f.input :url %>
        <%= f.input :street %>
        <%= f.input :city %>
        <%= f.input :state %>
        <%= f.input :description, as: :text, :input_html => { :cols => 5, :rows => 10 } %>
        <%= f.submit "Submit", class: "button small radius" %>
      </fieldset>
    <% end %>
  </div>
</div>

Answer 1

Since you are using bootstrap, default properties of bootstrap applies to your input textarea. It causes the problem. I had the same problem but, with columns.

You can overcome this problem by two solutions:

1.) Create a class and specify the height and width to be auto. Use the class wherever required.

Create this class in your application.css or any css file.

.test
{
width: auto;
height: auto;
}    

Now use this class in your ruby code.

 <%= f.input :description, as: :text, :input_html => { class: 'test', :cols => 5, :rows => 10 } %>

Since you have explicitly specified the width and height to be auto, the bootstrap's textarea width, height will be overrided by the local class 'test' width and height. Hence :cols => 5, :rows => 10 properties will be set.

2.) Modify the input textarea properties in your bootstrap css file. Change the height or width of input textarea to auto to avoid confusions or set it to a standard pixel if you are going to use the same width and height everywhere.

Answer 2

the class assignment doesn't work , try this instead

=f.input :description, label: false, :as => :text, :input_html => { :rows => 7 , :style => 'width: 100%'}

Works gre8 for me.!