加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

ruby-on-rails – 使用Simple_Form对齐f.collection_check_boxes

发布时间:2020-12-16 21:27:33 所属栏目:百科 来源:网络整理
导读:我正在使用RoR,我正在使用Simple_Form gem作为我的表单.我有一个对象关系,用户可以有多个角色,在创建过程中,管理员可以选择要应用于新用户的角色.我希望角色在左边有他们的复选框,他们的名字在右边是一个横向排列的. // “框”管理员 // 而不是现在的 // “
我正在使用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,: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;
 }

解决方法

根据 doc of collection_check_boxes,有一个选项item_wrapper_class给一个css类到包含复选框的span.像这样使用
<%= f.collection_check_boxes :role_ids,:item_wrapper_class => 'checkbox_container' %>

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

.checkbox_container input {
  display: inline;
}

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读