11

我正在使用 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;
 }
4

4 回答 4

9

根据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;
}
于 2013-01-03T20:07:37.573 回答
5

在 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'  %>

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

于 2013-03-24T10:30:52.497 回答
4

这是使用“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

于 2017-04-14T07:04:05.453 回答
3

使用 Bootstrap，您可以：

<%= f.collection_check_boxes :role_ids, Role.all, :id, :name, :item_wrapper_class => 'inline' %>
于 2013-03-09T04:57:16.253 回答