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

我不熟悉简单的表单，但看起来你需要像输入一样的另一列。尝试使用＆＃39; col-sm-4＆＃39;添加某种范围。类。

 <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>

简单的表格格式，没有自定义CSS在rails中

2 个答案: