Question

I have a text_area that is showing up with a height that is too large.

I am using simple form and I have read their documentation, but am still unclear on how to apply a css class to a text_area.

My form:

  <div class="field">
    <p>What's on your mind?</p>
    <%= f.text_area :content, :wrapper_html => { :class => 'height-100px' }, placeholder: "Thought leads to action..." %>
  </div>

My css:

.height-100px {
   height:100px;
}

When I apply CSS to a div surrounding the input field it truncates the height, but inserts a scrollbar. Clearly, I am not applying the right css in that case.

I think this is an easy question to answer, but let me know. Thanks!

Answer 1

I ended up applying the class name “mf” to the section and using the generic “textarea” element to style all textareas on the site using this:

.mf {
textarea { 
height:50px;
}
}

Would have been nice to apply the class name directly on the simpleform element, but it would not work for me…