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

我不熟悉简单表单，但看起来您需要像输入一样的另一列。尝试使用 'col-sm-4' class 添加某种跨度。

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

Answer 2

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

参见：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 选项，如上所述。

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

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

Simple Form format without custom CSS in rails

ruby-on-rails

simple-form

twitter-bootstrap