django-filter how to style RangeFilter?

user_17428936 0
Viewed 361

I have a problem with styling a range input. I'm using django_filters.RangeFilter class on declaring my filter: parent__length = django_filters.RangeFilter(label="Length")

It looks like this as follows:

enter image description here

I want to have this length input in one row separated with the "-" sign. I'm using the bootstrap grid when I'm displaying that filters.

Thank you in advance

css django html python
1 Answers

I just dealt with this same issue when trying to render the RangeFilter using django-crispy-forms and I did not find a great solution. I ended up modifying the template directly by making my own widget that extends django_filters.widgets.RangeWidget.

class MyRangeWidget(django_filters.widgets.RangeWidget):
    template_name = "my_range_widget.html"

The default template from django_filters/widgets/multiwidget.html looks like the following and you can modify it with any html you want.

{% for widget in widget.subwidgets %}{% include widget.template_name %}{% if forloop.first %}-{% endif %}{% endfor %}

Then you can use it in your filter like this.

parent__length = django_filters.RangeFilter(label="Length", widget=MyRangeWidget)
user_38623250
Related