CODEWITHSUNDEEP
htmlcssruby-on-railssimple-form
Jake
Jake

Reputation: 1186

Simple_form textarea resize: vertically

I have a simple form that I want to be able to resize vertically, not horizontally. My CSS isn't passing through to the form and I was wondering if there was an error in my code or a workaround needed for simple_form, thanks!

CSS:

/* CONTACT */
.general-contact { min-height: 390px;}
#contactTextarea { margin-bottom: ; }
#contactTextarea > textarea {
border: 1px inset #333333;
background-color: #242323;
color: #E0E0E0;
resize: vertical;
}

HTML:

<div class="panel-body general-contact">
  <%= simple_form_for(@contact, url: contact_path) do |f| %>
  <%= render 'shared/error_messages', object: f.object %>
    <div class="form-group">
      <%= f.input :email, :required => false, class: "form-control" %>
    </div>
    <div class="form-group">
      <%= f.input :subject, :required => false, class: "form-control" %>
    </div>
    <div class="form-group hidden">
      <%= f.input :nickname, :hint => "leave this field blank!", class: "form-control" %>
    </div>
    <div class="form-group" id="contactTextarea">
      <%= f.input :message, :as => :text, :input_html => {:rows => 5}, class: "form-control" %>
    </div>
      <%= f.submit "Send message!", class: "btn btn-success" %>
  <% end %>
</div>

Upvotes: 1

Views: 1833

Answers (1)

SRack
SRack

Reputation: 12203

Have a go at using the Simple Form's wrapper_html option, rather than using your own divs. Simple Form auto-generates the wrapper, so it might be your text area is getting nested further than expected.

From their docs:

Since Simple Form generates a wrapper div around your label and input by default, you can pass any html attribute to that wrapper as well using the :wrapper_html option, like so:

<%= simple_form_for @user do |f| %>
  <%= f.input :username, wrapper_html: { class: 'username' } %>
  <%= f.input :password, wrapper_html: { id: 'password' } %>
  <%= f.input :remember_me, wrapper_html: { class: 'options' } %>
  <%= f.button :submit %>
<% end %>

Therefore, you should be able to use the line:

<%= f.input :message, :as => :text, :input_html => {:rows => 5}, class: "form-control", wrapper_html: { id: 'contactTextarea' } %>

Let me know how you get on with that / any questions you have!

Upvotes: 2

Related Questions