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。简单表单会自动生成包装器，因此您的文本区域可能会比预期更嵌套。

来自docs：

由于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' } %>

让我知道你如何继续这个/你有任何问题！

Simple_form textarea调整大小：垂直

1 个答案: