Automate form wrapper classes #576

Closed
zachattack opened this Issue May 22, 2012 · 14 comments

Projects

None yet

9 participants

@zachattack

Having some trouble accomplishing the task of changing the way the wrapper is being assigned a class.

My objective, is to have the wrapper div receive a class that matches the field name.

From:

<div class="input string required">
    <input name="[first_name]">

To:

<div class="input string required first_name">
    <input name="[first_name]">

When building a more complex layout for the form having these unique identifiers would be greatly appreciated. If anyone has a suggestion for how to do this other than setting the wrapper class in each line of each element, I would appreciate the help.

Thank you

Zach

@emptyflask

+1

I've been trying to find a way to do this since switching from Formtastic...

@carlosantoniodasilva
Collaborator

This is not possible right now, unless you do some sort of monkey patching, or add it for the required inputs manually.

@emptyflask

Alright then, here's a monkey patch for anyone who might be interested:

# Hack to add object_name + attribute_name to wrapper classes:
module SimpleForm
  module Wrappers
    class Root < Many
      private

      alias_method :html_classes_orig, :html_classes

      def html_classes(input, options)
        css = html_classes_orig(input, options)
        css << "#{input.object_name}_#{input.attribute_name}"
        css
      end
    end
  end
end

I can turn this into a pull request if there's any chance of @plataformatec merging it...

@carlosantoniodasilva
Collaborator

I'm unsure this is something we'd add by default, and I can't think of a good solution right now (sorry I'm sleepy).. It's hard to make it work for everyone, some want all possible css classes, some want to cleanup the html output 😃.

@rafaelfranca thoughts on this one?

@zachattack

+1 @emptyflask for the monkey patch.

I think adding a verbose wrapper option to the config is a value add.

@scottmartin

I too would like this behavior to at least be an option. I style forms that way quite frequently and it is one of the reasons I'm still using Formtastic. But thanks to this monkey patch I may finally switch to Simple Form.

@nashby
Collaborator
nashby commented Oct 1, 2012

@rafaelfranca I think we should stick with current implementation and add that monkey patch to the Wiki page. Thoughts?

@rafaelfranca
Collaborator

I don't like the idea to add Yet Another Configuration Option ™️. I think is better to generate this class by default and use the generate_additional_classes_for to disable it.

Like we are doing in this one https://github.com/plataformatec/simple_form/blob/master/lib/simple_form/wrappers/root.rb#L27

@aripollak

From my perspective as someone who wants to switch from formtastic to simple_form, I just need a way to have a CSS selector for a specific error/hint wrapper on a particular field, preferably without monkey-patching. The easiest way to get this would just be a field-specific class/id on the surrounding wrapper by default.
Another option might be to allow the :class and :error_class options (maybe also an id?) to take a Ruby class or Procs that then get passed an input field and return a list of HTML classes. This might be overkill since I can't think of another use case for such a thing, but I'd take a stab at implementing it if it sounds like a good idea.

@rafaelfranca
Collaborator

Should not be hard to do what I suggested. I'll take a look at this tomorrow.

@lucasmazza lucasmazza added a commit that closed this issue Oct 7, 2012
@lucasmazza lucasmazza Generates additional wrapper class based on object + attribute name,
like `<div class='input string user_name'>`.

Closes #576
b5f2ea4
@lucasmazza lucasmazza closed this in b5f2ea4 Oct 7, 2012
@lucasmazza
Member

Hey guys, just pushed b5f2ea4 for this based on @rafaelfranca input and @emptyflask code 😄.

@rafaelfranca
Collaborator

❤️

@emptyflask

Thanks!

@kgx
kgx commented Dec 12, 2012

Thank you @lucasmazza for adding this to 2.1.dev. It is very useful for customizing form layouts because the wrapper is the outermost container for each logical grouping of label, input, errors, etc.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment