Question

I have a simple Formtastic form with nested model as follow.

<%= semantic_form_for @event do |form| %>
  <%= form.input :user_id , :as => :hidden, :value => @user.id %>
  <%= form.input :title %>
  <%= form.input :invitations, :as => :check_boxes, :collection => Group.find(:all, :order => "name ASC"), :for => :invitations, :name => "Invitation", :include_blank => false %>
  <%= form.buttons %>
<% end %>

Somehow, Formtastic puts my inputs into an unordered list as follow:

I wonder how I can change the setting to fix this.

Also, for the checkbox, Formtastic automatically add a nill option:

  Parameters: {"utf8"=>"✓", "authenticity_token"=>"XXX", "event"=>{"title"=>"test 15",  "type"=>"", "invitation_ids"=>["", "2", "1"]}, "commit"=>"Create Event"}

How should I fix this?

Thank you.

Answer 1

I had this exact same issue. Here’s how I fixed it:

ERB

<div class="some_class">
   <%= semantic_form_for @event do |form| %>
      <%= form.input :user_id , :as => :hidden, :value => @user.id %>
      <%= form.input :title %>
      <%= form.input :invitations, :as => :check_boxes, :collection => Group.find(:all, :order => "name ASC"), :for => :invitations, :name => "Invitation", :include_blank => false %>
      <%= form.buttons %>
   <%= end %>
</div>

CSS

.some_class {
   li {
      list-style-type:none;
   }
}

I’m not certain that this is the absolute correct way to solve the problem, but for me it has done what I wanted it to do. Hope this helps!

I had tried adding a class to the forms specifically, but that wasn’t targeting the ‘li’ since it was a child of that element. Since formtastic creates the ‘li’, I decided to go to the parent element of the ‘li’ and target it from the top down.