将f.collection_check_boxes的复选框与Simple_Form对齐 [英] Align checkboxes for f.collection_check_boxes with Simple_Form

问题描述

我使用RoR，我使用Simple_Form gem来做我的表单。我有一个对象关系，用户可以有多个角色，在创建过程中，管理员可以选择要应用到新用户的角色。我想角色在左边有他们的复选框，他们的名字在水平安排在右边。

I am using RoR and I am using the Simple_Form gem for my forms. I have an object relation whereby a User can have multiple Roles, and during creation, the admin can select which Roles to apply to the new User. I would like the Roles to have their checkbox on the left, and their name on the right in a horizontal arrangement.

//
boxAdmin
//

// "box" Admin //

而不是目前的

//

框

管理

//

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

My current code to show the Roles is this.

  <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生成这样的代码。

The part I am most getting hung up on is the fact that the f.collection_check_boxes generates code like this.

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

这使得我很难得到一个css类，因为有3个组件触摸。我试过添加一些东西，如虚拟类到：html哈希，但虚拟类甚至不会显示在渲染的html。

Which makes it hard for me to get a css class in there as there are 3 components that have to be touched. I've tried adding things such as dummy classes to the :html hash, but the dummy class doesn't even show up in the rendered html.

任何帮助是很大赞美

编辑：解决方案

感谢Baldrick， this。

Thanks to Baldrick, my working erb looks like this.

<%= 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;
 }

推荐答案

根据 collection_check_boxes的doc，有一个选项 item_wrapper_class ，为包含该复选框的span指定一个css类。使用像

According to the doc of collection_check_boxes, there is an option item_wrapper_class to give a css class to the span containing the checkbox. Use it like that

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

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

And a CSS style to keep the checkbox and the label on the same line:

.checkbox_container input {
  display: inline;
}

这篇关于将f.collection_check_boxes的复选框与Simple_Form对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！