简单表单关联与默认输入类冲突答案

【问题标题】：Simple form association has conflict with default input class简单表单关联与默认输入类冲突
【发布时间】：2016-07-23 11:16:29
【问题描述】：

我有一个简单的表格。一切都很顺利，直到我想添加一个关联表单。该协会本身运作良好，所以我将跳过它。保存数据有效。问题在于异常中输入类的控制。

<%= simple_form_for @fabmoment do |f| %>
      	
  <%= f.input_field :title %>
  <%= f.label :title %>
  <%= f.error :title %>
  <%= f.input_field :description, rows: 7 %>
  <%= f.label :description %>
  <%= f.error :description %><br><br>
  <%= f.association :machines, as: :check_boxes, 
                               :label_method => lambda { |m| " #{m.name}" } %>
    
<% end %>

如您所见，我非常具体地说明了放置内容的位置，这是因为我的 CSS 库 (W3.CSS)。问题是在我的初始化程序中，我将"w3-input" 类作为输入的默认值。但这不适用于我的关联复选框。目前我看到标签和输入复选框不是内联的。

如果"w3-input" 类不存在，情况就不会如此。但是我不能删除它，我只能像item_wrapper_tag和item_wrapper_class一样深。

这是他非常烦人的。昨天我已经忙了几个小时了。

为什么我不能这样做：

<%= f.association :machines, as: :check_boxes do |m| %>

  <%= m.check_box :machine_id, class: 'w3-check' %>
  <%= m.label :name, class: 'w3-validate' %>

<% end %>

【问题讨论】：

标签： ruby-on-rails simple-form

【解决方案1】：

原来有一个选项可以通过input_html 和label_html 将html 属性传递给simple_form 标签。您可以从Here 找到所有选项对于您的上述问题，您可以执行类似

的操作

<%= f.association :machines, as: :check_boxes, input_html:{class: 'w3-check'} ,label_html: {class: 'w3-validate'}%>

这将在所有机器复选框上添加w3-check 类，在这些复选框的所有标签上添加w3-validate，然后您可以相应地设置样式

【讨论】：

使用 input_html 我终于能够到达项目的输入标签。谢谢，这解决了我 80% 的问题。我仍然无法到达标签标签。此 label_html 以复选框列表上方的标签为目标。这很好，但我需要一个项目的标签才能确实添加w3-validate。
您可以使用wrapper_html: {class: 'checkbox_container'} 这将在所有复选框的父级上添加此类。然后，您可以通过 .checkbox_container label{border:1px solid gray} 申请 css。这将把这个 css 应用到所有对应于 machines 的标签上
谢谢。我觉得这有点麻烦，但如果没有其他方法可以做到这一点，我认为它必须这样做。顺便说一句，sass 没有办法用预定义的类扩展 css 选择器吗？无论如何，我可以自己调查一下。
是的，您可以使用 @extend 。从css-tricks.com/the-extend-concept查找详细信息