Einfache Formularzuordnung hat einen Konflikt mit der Standard-Eingabeklasse

Question

Ich habe eine einfache Form. Alles funktionierte ziemlich ok bis ich an den Punkt kam, an dem ich ein Assoziationsformular hinzufügen wollte. Die Assoziation selbst funktioniert gut, also werde ich das überspringen. Das Speichern von Daten funktioniert. Das Problem liegt in der Kontrolle der Eingabeklasse in Ausnahmen.

<%= simple_form_for @fabmoment do |f| %> 
 
     \t 
 
    <%= 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 %>

Wie Sie sehen, ich bin sehr spezifisch in dem ich setzen, was, und das ist wegen meiner CSS-Bibliothek (W3.CSS). Das Problem ist, dass ich in meinem Initialisierer die Klasse von "w3-input" als Standard für Eingaben gesetzt habe. Aber das funktioniert nicht für meine Assoziationsfelder. Im Moment sehe ich, dass das Label und das Eingabefeld nicht inline sind.

Dies wäre nicht der Fall, wenn die "w3-input" Klasse nicht da wäre. Aber ich kann es nicht entfernen, ich kann nur so tief gehen wie die item_wrapper_tag und die item_wrapper_class.

Dies ist sehr ärgerlich. Ich war gestern stundenlang damit beschäftigt.

Warum kann ich nicht etwas tun, wie folgt aus:

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

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

 
<% end %>

Answer 1

Es stellt sich heraus, es ist eine Option HTML passieren Attribute von input_html und label_html Tag simple_form. Dies fügt w3-check Klasse auf allen Maschinen Kontrollkästchen und w3-validate auf alle Etiketten dieser Kontrollkästchen können Sie alle Optionen aus Here Für Ihre oben Ausgabe finden Sie so etwas wie

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

tun und dann können Sie style entsprechend