CODEWITHSUNDEEP
ruby-on-railsformsformtastic
AdamNYC
AdamNYC

Reputation: 20415

Rails formtastic automatically create unordered list for form inputs

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:

enter image description here

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.

Upvotes: 2

Views: 1967

Answers (2)

Matt Wagner
Matt Wagner

Reputation: 920

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.

Upvotes: 8

Richard Hulse
Richard Hulse

Reputation: 10493

This is the default behavior of formtastic. Formtastic comes with its own stylesheet to suppress the display of bullets and format the form correctly. You'll need to include this in your layout, and then override any rules that don't suit your site.

In Rails < 3.1 there is a rake task to generate the necessary file:

rails generate formtastic:install

In 3.1 + the CSS is available via the assets pipeline.

Upvotes: 0

Related Questions