[Django]-Change layout of django-filter form

4👍

filter.form is a normal Django form, so you can layout it the way you want.

I see that you use crispy forms. But you can style it anyway you want, boostrap-way included.

Here is an example from the official documentation

You can use the .as_p method to get them in <p><label><input></label></p> format or you can generate them by hand:

<form method="get" class="form">
  <button type="submit" class ="btn btn-primary">Filtern</button>
  {{ filter.form.non_field_errors }}
  <div class="boostrap-class">
    {{ filter.form.name.errors }}
    <label for="{{ filter.form.name.id_for_label }}" class="another-boostrap-class">Name</label>
    {{ filter.form.name }}
  </div>
  <div class="boostrap-class">
    {{ filter.form.description.errors }}
    <label for="{{ filter.form.description.id_for_label }}" class="another-boostrap-class">Description</label>
    {{ filter.form.description }}
  </div>
</form>

You can also specify a custom Form class in your filterset meta (EquipmentFilter.Meta) and use techniques presented in this other SO question

0👍

I use class based views, my solution is to override get_context_data and massage the form there:


class EquipmentListView(
       SingleTableMixin,
       FilterView):

    model = Equipment
    table_class = EquipmentTable
    template_name = 'equipment/tables2/list.html'
    filterset_class = EquipmentFilter

    # override get_context_data
    def get_context_data(self, **kwargs):
        context = super().get_context_data(**kwargs)
        filter = context['filter']
        form = filter.form             # <- here!
        form.helper = FormHelper()
        form.helper.add_input(
            Submit('submit', 'Filter', css_class='btn-primary')
        )
        return context

Leave a comment