將f.collection_check_boxes的複選框與Simple_Form對齊

我正在使用RoR，並且正在爲我的窗體使用Simple_Form gem。我有一個對象關係，用戶可以擁有多個角色，並且在創建期間，管理員可以選擇應用於新用戶的角色。我希望角色的複選框在左側，他們的名字在右側水平排列。將f.collection_check_boxes的複選框與Simple_Form對齊

// 「盒子」管理 //

，而不是當前

「盒子」

聯繫

我目前的代碼顯示這是角色。

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

來源

2013-01-03 Black Dynamite

按照doc of 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-03 20:07:37 Baldrick

謝謝，這幾乎是答案。 –

由於沒有使用「collection_check_boxes」創建範圍，鏈接的頁面上沒有任何「item_wrapper_class」，並且如果將其放入，結果頁面html中沒有任何更改，所以我猜事情已經發生了變化（再次）。我添加了一個類到周圍的div，然後用css「>」來影響其中的元素。 – JosephK

自舉，您可以：

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

來源

2013-03-09 04:57:16 why

在最新的2.1 .0分支的SimpleForm與2.3.1.0的bootstrap-saas一起安裝了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-24 10:30:52

這很好用。 – Ash

這是第一個用'rails collection_check_boxes bootstrap'進行DDG搜索的SO頁面，但它不是關於Bootstrap的，但是這裏有一個Bootstrap 4的解決方案。

這適用於普通的Rails和Bootstrap 4，不需要任何寶石。 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-14 07:04:05 Chloe

將f.collection_check_boxes的複選框與Simple_Form對齊

回答

相關問題