Rails 中没有自定义 CSS 的简单表单格式

Question

我在 rails 项目中使用 simple_form gem，并准备实现一个表单。表格很简单：

<%= simple_form_for admin, url: url do |f| %>
  <div class="form-inputs">
    <%= f.input :name %>   #String
    <%= f.input :email %>   #String
    <%= f.input :sso_only %>   #Boolean
  </div>
<% end %>

生成的html是：

<form novalidate="novalidate" class="simple_form new_user" id="new_user" action="/admin/admins" accept-charset="UTF-8" method="post">
  <div class="form-group string required user_name">
    <label class="string required col-sm-4 control-label" for="user_name">
      <abbr title="required">*</abbr>
       Name
    </label>
    <div class="col-sm-8">
      <input class="string required form-control" type="text" name="user[name]" id="user_name">
    </div>
  </div>
  <div class="form-group email required user_email">
    <label class="email required col-sm-4 control-label" for="user_email">
      <abbr title="required">*</abbr>
       Email
    </label>
    <div class="col-sm-8">
      <input class="string email required form-control" type="email" value="" name="user[email]" id="user_email">
    </div>
  </div>
  <div class="form-group boolean optional user_sso_only">
    <div class="col-sm-8">
      <div class="checkbox">
        <input value="0" type="hidden" name="user[sso_only]">
        <label class="boolean optional" for="user_sso_only">
          <input class="boolean optional" type="checkbox" value="1" name="user[sso_only]" id="user_sso_only">
          SSO Only
        </label>
      </div>
    </div>
  </div>
</form>

显示是：

从图中我们可以看到，name和email字段包括label和input两部分。 label 有 4 个大小，input 有 8 个。

但是checkbox只包含一个部分，即8。所以checkbox在那个位置时非常难看。

通常，我希望复选框与input 框的位置相同。这应该是表单的正常显示。

因此，有没有办法通过使用simple_form 本身来达到这个目的？无需自定义 CSS。

我尝试过wrapper，但失败了。

Answer 1

要获得您想要的结果并允许自定义，您需要对标记和包装器进行修改。

见：https://github.com/plataformatec/simple_form#the-wrappers-api

您可以修改现有的顶级包装器以公开您想要包含偏移量的 div。

sso_only 字段的 erb 标记可以这样修改：

<%= f.input :sso_only, checkbox_wrapper_html: { class: 'col-sm-offset-4' } %>

然后，为了让标记识别修改，您必须更改包含包装器定义的现有初始化程序以响应 checkbox_wrapper 选项（取自默认值）。

# config/initializers/simple_form.rb
....
config.wrappers :horizontal_boolean, tag: 'div', class: 'form-group', error_class: 'has-error' do |b|
  b.use :html5
  b.optional :readonly

  b.wrapper :checkbox_wrapper, tag: 'div', class: 'col-sm-8' do |wr|
    wr.wrapper tag: 'div', class: 'checkbox' do |ba|
      ba.use :label_input
    end

    wr.use :error, wrap_with: { tag: 'span', class: 'help-block' }
    wr.use :hint,  wrap_with: { tag: 'p', class: 'help-block' }
  end
end
....

注意在块中添加了:checkbox_wrapper。这将允许您在上述标记中使用checkbox_wrapper_html 选项。

这也可以应用于任何其他现有的包装器。

Answer 2

我不熟悉简单的形式，但看起来您需要另一个列，例如您的输入。尝试使用“col-sm-4”类添加某种跨度。

 <span class="col-sm-4 control-label" for=""></span>
 <div class="col-sm-8">
      <div class="checkbox">
        <input value="0" type="hidden" name="user[sso_only]">
        <label class="boolean optional" for="user_sso_only">
          <input class="boolean optional" type="checkbox" value="1" name="user[sso_only]" id="user_sso_only">
          SSO Only
        </label>
      </div>
    </div>