Question

我在代码中的一点使用以下form_for来显示一系列主题供用户选择。

 <%= form_for @user do |f| %> 
 <%= f.collection_check_boxes(:topic_ids, Topic.all.sample(50).each, :id, :topic_name) %> 
 <%= f.submit %>
 <% end %>

在页面上呈现时，这些框都是一个接一个的。如何分隔它们，以使每行有一个复选框？

Answer 1

来自reference here 可以通过在上面的代码中为下面的示例提供一个方法块来自定义元素的显示方式

<%= form_for @user do |f| %> 
 <%= f.collection_check_boxes :topic_ids, Topic.all.sample(50).each, :id, :topic_name do |b| %> 
   <%= b.label(class: "check_box") do %>
     <%= b.check_box(class: "check_box") %>
     <%= b.object.topic_name %></br>
   <% end %>
 <% end %> 
 <%= f.submit %>
<% end %>

Answer 2

您当然可以在块内呈现HTML：

   <%= form_for @user do |f| %> 
      <%= f.collection_check_boxes :topic_ids, Topic.all.sample(50).each, :id, : topic_name do |b| %>
      <div  class="my-checkbox-wrapper">
        <%= b.label(class: "foo") do %>
          <%= b.object.topic_name %>
          <%= b.check_box(class: "bar") ></br>
       <%end%>
       <%= f.submit %>
    <%end%>

您可以看看此example

Answer 3

这是一个非常广泛的问题。简而言之，使用CSS。

例如，使用Bootstrap 4：

<%= form_for @user do |f| %>
<div class="form-check">
  <%= f.collection_check_boxes :topic_ids, Topic.all.sample(50).each, :id, :topic_name, class: 'form-check-input' %>
</div>
<%= f.submit %>
<% end %>

如何使用form_for和collection_check_boxes插入新的换行符

3 个答案: