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

问题描述

我正在使用 RoR 并且我正在为我的表单使用 Simple_Form gem.我有一个对象关系，一个用户可以有多个角色，在创建过程中，管理员可以选择将哪些角色应用于新用户.我希望角色的复选框在左边，他们的名字在右边水平排列.

//盒子"管理员//

代替当前

//

盒子"

管理员

//

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

 
<%= f.label '角色' %><div class="控件"><%= f.collection_check_boxes:role_ids, Role.all, :id, :name %>

我最关心的部分是 f.collection_check_boxes 生成这样的代码.

<输入等等等等/><label class="collection_check_boxes" 等等>等等</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 {显示:内联块；垂直对齐:-1px；边距:5px；}.checkbox_container 输入 {显示:内联；}.checkbox_container .collection_check_boxes{显示:内联；垂直对齐:-5px；}

解决方案

根据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 输入 {显示:内联；}

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.

// "box" Admin //

instead of the current

//

"box"

Admin

//

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>

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>

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.

Any help is greatly appreciated

EDIT: Solution

Thanks to Baldrick, my working erb looks like this.

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

And my CSS is as follows

.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;
 }

解决方案

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

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