Row-based layout for FormCollection

[jwoithe]

django-formset versions: 0.13.2 and 0.13.4.

In several of the demo programs it is shown that using

{% render_form form "bootstrap"
    field_css_classes="row mb-3" label_css_classes="col-sm-3"
    control_css_classes="col-sm-9" %}

will switch to a row-based layout. That is, a control's label is to the left of the control. When it comes to using a FormCollection, the template entry is limited to

{{ form_collection }}

with other class information provided through a renderer assigned to the default_renderer field of the form class. To that end I have the following arrangement:

from formset.renderers.bootstrap import FormRenderer

class AddressForm(FieldsetMixin, ModelForm):
    default_renderer = FormRenderer(
                           form_css_classes="row",
                           field_css_classes="row mb-3",
                           label_css_classes="col-sm-3",
                           control_css_classes="col-sm-9",
                           fieldset_css_classes='form-flex border p-3')

class AddressCollection(FormCollection):
    default_renderer = FormRenderer()
    legend = "Addresses"
    add_label = "Add address"
    min_siblings = 1
    max_siblings = 4
    address_form = AddressForm()

class AccountCollection(FormCollection):
    default_renderer = FormRenderer()
    account = AccountForm()
    addresses = AddressCollection()

class AccountCollectionView(EditCollectionView):
    model = Account
    collection_class = AccountCollection

While the contents of field_css_classes and label_css_classes make it into the rendered HTML, the content of control_css_classes does not. This prevents the control being shown next to the control. The control_css_classes content is mentioned in formset/templates/formset/bootstrap/field_group.html. It's absence from the rendered HTML suggests that either this file isn't being consulted for some reason or control_css_classes isn't being propagated as expected.

Putting the extra CSS classes into the FormRenderer() in the FormCollection doesn't change things. Neither does the omission of the FormCollection's default_renderer assignment.

I should note the presence of the fieldset_css_classes in the FormRenderer() instantiation. I have found that without form-flex in particular, the bootstrap classes such as mb-3 and col-sm-3 had no effect at all. That said, I'm not entirely convinced that form-flex is the correct thing to put here - it just happens to be an educated guess which seem to mostly work.

Before digging any deeper into this, I was wondering whether I was missing something obvious.

[gumish]

I'm not sure what is precisely going on here. But maybe I have a similar problem with 'default_renderer' in #43.
Finally I realized that render details have to be assigned to 'render' not to 'default_render'. Then I was able to control rendering of sub-collections.
#43 (reply in thread)

[jwoithe]

I think your problem was slightly different to mine. In #43, the issue was that the render settings were having no effect at all. In my case, some are, but control_css_classes is not.

Looking at the initial example in #43, the setting of default_render was in the TeamCollection class, rather than in the TeamForm class. As a result, the custom renderer was used for TeamCollection, not TeamForm. I suspect if you'd set default_render in TeamForm rather than TeamCollection then it would have worked as intended. By using the "render" parameter to the TeamForm constructor in the TeamCollection (#43 (reply in thread)) you are effectively specifying the renderer to use for TeamForm, so it also works as expected.

In my case, I define default_render in AddressForm, which is equivalent to the TeamForm class in #43. For me, some of the css classes take effect, but I cannot get labels to appear next to their respective controls because control_css_classes isn't propagated into the rendered output. For completeness, I tried defining the renderer using the "render" parameter when instantiating the AddressForm (like you ultimately did in #43) but it didn't change the behaviour in any way.

[jwoithe]

Further experimentation showed that the problem in my case was the use of the FieldsetMixin. To be honest I'm not sure why this was included in the definition of AddressForm. I suspect I saw it in an example somewhere and just copied it in.

If the FieldsetMixin is not used, the template file utilised by the form by the bootstrap renderer is formset/bootstrap/form.html, which uses formset/bootstrap/field_group.html to render the fields. The latter explicitly references control_css_classes, which explains why control_css_classes takes effect when FieldsetMixin is not used.

When FieldsetMixin is included, the template used is formset/default/fieldset.html. This in turn uses formset/default/field_group.html to render the form fields. The latter template makes no mention of control_css_classes, which explains why this doesn't take effect with FieldsetMixin included in the form class.

Omitting FieldsetMixin also makes fieldset_css_classes ineffective, which takes out the form-flex class mentioned at the end of the initial comment. However, this didn't stop the bootstrap layout classes working. Thus without FieldsetMixin, the bootstrap layout classes are fully functional without form-flex being explicitly mentioned.

The form_css_classes FormRenderer parameter is roughly equivalent to fieldset_css_classes when FieldsetMixin is not present. It can be used to place borders around the form, set margins and padding, and so on.

While marking this as an answer to the initial question, I wonder whether the behaviour of the FieldsetMixin is as intended. As currently coded, the FieldsetMixin templates prevent some bootstrap layout options being used (such as row-based label-control pairs) when FieldsetMixin is included in a class derived from ModelForm. If this is an intended use case (which I was originally doing), the templates may need adjustment. Perhaps the formset/default/fieldset.html or formset/default/field_group.html templates need to be mapped to bootstrap-specific versions in renderers/bootstrap.py which propogate control_css_classes. If, however, FieldsetMixin is not designed to be used with ModelForm then all this is a moot point.

This question could therefore be converted to an issue if FieldsetMixin is expected to work with ModelForm.

[jrief]

In the AddressForm example, I use the fieldset to show how to use show-if and hide-if. If you don't need any of those, and don't need the extra elements such as <legend>, don't use it.

Did you try to play with the fieldset_classes when using the bootstrap.FormRenderer?

[jwoithe]

Thanks, that might be where I picked it up from. I don't need the *-if or legend functionality in my current situation so I will keep the FieldsetMixin out of the form class. I will note that the Fieldset causes issues for bootstrap layout classes in case I do end up needing to combine it with a ModelForm in future.

When the FieldsetMixin was active, I did use fieldset_css_classes:

fieldset_css_classes='form-flex border p-3'

The border and padding were personal preferences. The form-flex was required to make bootstrap classes such as mb-3 (in field_css_classes) and col-sm-3 (in label_css_classes) work. I didn't try any other classes in fieldset_css_classes because I didn't know what else there might be at the time.