Simple_form textarea調整大小：垂直

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會在標簽和輸入周圍生成包裝器div，因此您也可以使用：wrapper_html選項將任何html屬性傳遞給該包裝器，如下所示：

<%= 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' } %>

讓我知道您如何處理/有任何疑問！