Simple_form 文本区域调整大小：垂直

Question

我有一个简单的表单，我希望它能够垂直调整大小，而不是水平调整。我的 CSS 没有传递到表单，我想知道我的代码是否有错误或 simple_form 是否需要解决方法，谢谢！

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>

Answer 1

尝试使用简单表单的 wrapper_html 选项，而不是使用您自己的 div。 Simple Form auto-generates 包装器，因此可能是您的文本区域嵌套得比预期的要多。

来自他们的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 %>

因此，您应该可以使用以下行：

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

让我知道你的进展情况/你有任何问题！

Simple_form 文本区域调整大小：垂直

Simple_form textarea resize: vertically

html

css

ruby-on-rails

simple-form