Automate form wrapper classes #576

zachattack opened this Issue May 22, 2012 · 14 comments


None yet

9 participants


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.


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


<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




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


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


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

      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}"

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


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?


+1 @emptyflask for the monkey patch.

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


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 commented Oct 1, 2012

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


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


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.


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
@lucasmazza lucasmazza closed this in b5f2ea4 Oct 7, 2012

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





kgx commented Dec 12, 2012

Thank you @lucasmazza for adding this to 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