Administrate: Pass custom HTML classes into fields

[gracewashere]

This conversation is carried over from #323. Here are the relevant comments from that issue:

@michaelimstepf said:

Is there any way I can pass in an HTML class to a field? I saw in the Ruby docs that there's an html_class method but it doesn't accept any argument. I'm basically trying to add some custom styling (I have a verified checkbox/boolean for some attributes that I want to float left to the field it applies to).

@graysonwright said:

@michaelimstepf The html_class method is part of the private API - it's not used for customizing the generated HTML.

The best way to do that right now would be to generate the view and override the HTML.

I think we could add better support for this by accepting a html_class option, like:

name: Field::String.with_options(html_class: "username")

If we take that approach, the question comes up of how this is handled on the different pages. Would we apply the html class to the form as well as the table cell, or would we allow users to pass in different classes for each of the pages?

Another option would be to add another HTML class by default to all of the fields, with the format .attribute-foobar. That would let users select any field they want with selectors like .cell-data.attribute-name.

What are your thoughts on those options?

@michaelimstepf said:

@graysonwright Thx. They syntax you posted looks very good to me.

Given that all three pages (index, show, edit) use different html attributes, I would just apply the same class to all of the three pages and then it's up to the user to limit the scope to a specific html element.

The other option you suggested (HTML class by default to all of the fields) would work but I think is inferior for the following reasons:

It's less DRY, in your CSS you'll maintain a list of attributes for a specific style as opposed to just using one single class:

.some-class {}
.attribute-name, .attribute-gender, .attribute-nationality {}

And also, even though it's a class, it behaves more like an id, which is a bit confusing.

Then lastly, for me it would be very useful to have the class being applied to the wrapping element:

• table row for index
• div for form
• for show it's a bit tricky as there's no valid HTML element to wrap around unless you change the syntax: http://stackoverflow.com/a/10998064/1076279

The reason for this request is that for my use case I actually want to have certain related form fields floating next to each other. It's always easy to target a child within a class for those who want to only style an input or label tag but with pure CSS there's no sane way to target a parent element if the CSS is being applied to the input field for instance.

[zamith]

@graysonwright Is this option passing preferable to overriding the view files? We might get into a simple_form trap here, where you have to know a lot of syntax in order to customize things, virtually having to "learn" simple_form.

[gracewashere]

@zamith yeah, I'd definitely like to avoid getting into that level of customization through options.

@michaelimstepf, I just re-read the customization that you're trying to do, and realized that we may have fixed it in #206. If you're trying to get the checkboxes to be left-aligned instead of in the center of the field, that might solve your problem. That was also released in 0.1.2.

Other than that, I would use rails generate administrate:field verified according to the docs at https://administrate-docs.herokuapp.com/adding_custom_field_types.

Community: If this process is too complex or heavy-handed to be a good solution, please let us know and we can re-open this.

[michalvalasek]

I understand your arguments but there is this very common scenario where you need to just add some class to the field in order to initialize some plugin on it (e.g. rich text editor over textarea, datepicker over text field, etc.). It think it's quite impractical to generate a custom field in such case - it really means this:

1. generate the field files
2. go to administrate's github repo, find the field class and views of the field you want modify (e.g. HasMany), copy the code and paste it in the generated files.
3. change the class in the form view.

Quite a lot of hassle when all you really need is 3.