Additional CSS id or class for fieldset and .form-group

[zopyx]

It would be very handy for custom styling if you could style a generated fieldset from a group with custom css. Would it be possible introduce as css or id parameter for groups besides legend or could a normalized representation of a group's legend be used for auto-generating a CSS id or class for the HTML fieldset?

The same applies to generated div.form-group wrappers around each field. An auto-generated CSS id or class would be very helpful.

[zoul0813]

You can provide a styleClasses for the group and use that to style the legend, and the fields styleClasses to apply a CSS class to a field specifically.

Here's a sample Fiddle: https://jsfiddle.net/zoul0813/k6gzcj6b/4/

[zopyx]

This is not what I am looking for. I should be possible to reference the outer wrapper classes for fields and groups.

[zoul0813]

Not sure I understand? You have access to the group, and to the individual field to provide custom CSS classes. From there, you can style everything.

Per your request, It would be very handy for custom styling if you could style a generated fieldset from a group with custom css. ... the answer I provided is the solution. You provide a styleClasses value to the group, and then style the generated group tag (and anything inside it) with that selector. You also have access to the outer most container of each field with the fields styleClasses property, allowing you to provide custom CSS class names to individual fields.

The JSFiddle I provided shows an example of two different groups in the same form styled differently using the styleClasses, and the first field in the first group is also custom styled using the styleClasses ... not sure what you're asking for that is different?

Can you provide an example of what you are trying to accomplish?

NOTE: be sure to update to the latest 2.2.0 version of VFG to take advantage of this

[Stephen9s]

Perhaps I have a different insight. I haven't encountered any example code that shows that vue-form-generator is capable of multi-column forms. Is this inaccurate?

What zopyx is suggesting is that with an outer wrapper on fieldsets as well as styleClasses on fields, you could offer increased flexibility in terms of form design.

To elaborate, for every field generated, it consists of a label and input of some type. The container is always a "form-group". An example of this is here: http://jsfiddle.net/tVHMy/2/

[zoul0813]

The group object supports “styleClasses”, and the field objects also support this. I use “col-md6” as my styleClasses for groups and fields to get multi-column layouts. I can provide an example using bootstrap for this tomorrow if necessary.

[zoul0813]

Here's an example of using Bootstrap 3 with VFG, creating two side-by-side groups ... and the "Skills" and "Status" fields are also side-by-side ...

https://jsfiddle.net/zoul0813/k6gzcj6b/5/

[Stephen9s]

I believe I hijacked the thread, so I do apologize. I realized my previous mistake; I worked off an old jsfiddle that didn't use Bootstrap. I was able to do exactly what I needed to do.

The documentation didn't explicitly cover what properties 'groups' supported. Field Properties (https://icebob.gitbooks.io/vueformgenerator/content/fields/field_properties.html) does explain what properties fields support, but Groups (https://icebob.gitbooks.io/vueformgenerator/content/groups.html) does not.

I apologize for the confusion, and I'm extremely appreciative of your assistance.

[zoul0813]

Support for styleClasses on groups is new, and the documentation may not have been updated for it.

@zopyx can this issue be closed, or do you require further assistance with this?