Question

I’m using f.semantic_fields_for with haml

here is the current snippet.

      %ul.documents
        =f.semantic_fields_for :documents do |u|
          = link_to(u.object.comment.presence || u.object.file.original_filename, u.object.file.url)                                                                                     
          = u.input :comment, :as=>:string
          = u.hidden_field :_destroy
          = link_to_function image_tag("/img/del_documets.png"), "remove_fields(this)", :class => "btn"

the problem here is that only “u.input :comment, :as=>:string” is inside the “li” created by formtastic. The links and other fields get somewhere else and its kinda impossible to style correctly this broken html.

Is there anyway to make sure everything get inside the correct li?

Even if I add a li just after f.semantic_fields_for, it will only wrap the first link and the following elements will get wrapped only by the ul completely above.

Answer 1

It seems like formtastic always wraps inputs with <li> to avoid <fieldsets> to be inside <ol>, which is not valid.

Your best way around that is to put <li> around all your elements and add wrapper_html => { :class => :your_class } to your input if you like. That way you can style things your way.

I don’t think you need the ul.documents around the inputs, semantic_fields_for already wraps everything using <ol>.

That’t the thing with libraries that generate html directly, you’d better adapt your html and css to them instead of trying to make them generate your html.

I would do that (and style my own CSS from it):

    =f.semantic_fields_for :documents do |u|
      %ul.documents
        %li= link_to(u.object.comment.presence || u.object.file.original_filename, u.object.file.url)                                                                                     
        = u.input :comment, :as=>:string
        %li= u.hidden_field :_destroy
        %li= link_to_function image_tag("/img/del_documets.png"), "remove_fields(this)", :class => "btn"

Hope this helps.