将f.collection_check_boxes的复选框与Simple_Form对齐

Question

我正在使用RoR,我正在使用Simple_Form gem来表示我的表单.我有一个对象关系,用户可以有多个角色,在创建过程中,管理员可以选择要应用于新用户的角色.我希望Roles的左边是复选框,右边的名字是水平排列.

//"box"管理员//

而不是当前

//

"框"

管理员

//

我目前显示角色的代码是这样的.

  <div class="control-group">
    <%= f.label 'Roles' %>
    <div class="controls">
      <%= f.collection_check_boxes 
                 :role_ids, Role.all, :id, :name %>
    </div>
  </div>

我最感兴趣的部分是f.collection_check_boxes生成这样的代码.

<span>
  <input blah blah />
  <label class="collection_check_boxes" blah>blah</label>
</span>

这让我很难在那里获得一个css类,因为有三个组件需要触及.我已经尝试将诸如虚拟类之类的东西添加到:html哈希,但是虚拟类甚至没有出现在渲染的html中.

任何帮助是极大的赞赏

编辑:解决方案

感谢Baldrick,我的工作erb看起来像这样.

<%= f.collection_check_boxes :role_ids, Role.all, :id, :name,
      {:item_wrapper_class => 'checkbox_container'} %>

我的CSS如下

.checkbox_container {
  display: inline-block;
  vertical-align: -1px;
  margin: 5px;
 }
.checkbox_container input {
  display: inline;
 }
.checkbox_container .collection_check_boxes{
  display: inline;
  vertical-align: -5px;
 }

Answer 1

根据collection_check_boxes的文档,有一个选项item_wrapper_class可以为包含复选框的范围提供css类.像这样使用它

<%= f.collection_check_boxes :role_ids, Role.all, :id, :name, :item_wrapper_class => 'checkbox_container' %>

还有一种CSS样式,可以将复选框和标签保持在同一行:

.checkbox_container input {
  display: inline;
}

Answer 2

在带有 bootstrap-saas 2.3.1.0 的 SimpleForm 最新 2.1.0 分支中，使用 bootstrap 选项安装时，collection_check_boxes 方法导致一些跨度应用内联项包装类没有良好的效果。

我能够使用标准输入、集合、:as => :check_boxes 方法使表单完美排列。然后内联样式完美运行：

<%= f.input :roles, :collection => valid_roles, :label_method => :last, :value_method => :first, :as => :check_boxes, :item_wrapper_class => 'inline'  %>

我的角色恰好是一个带有值、标签的简单数组。希望这可以帮助。

Answer 3

这是使用“rails collection_check_boxes bootstrap”进行 DDG 搜索的第一个 SO 页面，但它与 Bootstrap 无关，但无论如何，这里是 Bootstrap 4 的解决方案。

这适用于普通 Rails 和 Bootstrap 4，不需要 gem。collection_check_boxes是一个普通的 Rails 方法。

  .form-group
    =f.label :industry_interest
    %br
    =f.collection_check_boxes :industry_interest, Industry.all, :id, :name do |cb|
      =cb.check_box 
      =cb.label
      %br

或者

  .form-group
    =f.label :industry_interest
    =f.collection_check_boxes :industry_interest, Industry.all, :id, :name do |cb|
      .form-check
        =cb.label class: 'form-check-label' do
          =cb.check_box class: 'form-check-input'
          =cb.text 

它们看起来一模一样。

https://v4-alpha.getbootstrap.com/components/forms/#checkboxes-and-radios