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

Posted 2023-03-05

【中文标题】将 f.collection_check_boxes 的复选框与 Simple_Form 对齐

【英文标题】：Align checkboxes for f.collection_check_boxes with Simple_Form

【发布时间】：2012-12-18 05:38:45

【问题描述】：

我正在使用 RoR，并且我正在为我的表单使用 Simple_Form gem。我有一个对象关系，一个用户可以有多个角色，在创建过程中，管理员可以选择哪些角色应用于新用户。我希望角色的复选框位于左侧，右侧的名称横向排列。

// “盒子”管理员 //

而不是当前

//

“盒子”

管理员

//

我当前显示角色的代码是这样的。

  <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 类，因为必须触及 3 个组件。我尝试将诸如虚拟类之类的东西添加到 :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;
 

【参考方案1】：

根据doc of collection_check_boxes，有一个选项item_wrapper_class 可以为包含复选框的span 提供一个css 类。像这样使用它

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

还有一个 CSS 样式来保持复选框和标签在同一行：

.checkbox_container input 
  display: inline;

【讨论】：

谢谢，答案差不多了。

我想事情已经改变了（再次），因为没有使用“collection_check_boxes”创建跨度，链接的页面上没有“item_wrapper_class”，如果你把结果页面html没有任何变化这个。我在周围的 div 中添加了一个类，然后使用 css ">" 来影响其中的元素。

【参考方案2】：

在 SimpleForm 的最新 2.1.0 分支和 bootstrap-saas 的 2.3.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'  %>

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

【参考方案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

【讨论】：

最后添加一个%br 元素也会给所有带有不同行标签的框。否则我把它们都排成一排。

【参考方案4】：

使用 Bootstrap，您可以：

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