0

With django_filters, I have my filterset, everything works fine it's just the display that I am stuck with (box width).

As you can see below, I have changed the "size" attribute of some of the filter options - because the default is too wide. But the "rating" one, which is a NumberInput, doesn't work for some reason. The "size" attribute works for TextInput but not NumberInput.

I want to change the size or rather the width of the NumberInput box that will be displayed in the template (see template pictures below). Can anyone help? Thanks in advance!

class ReviewFilter(django_filters.FilterSet):
comments = CharFilter(field_name='comments', lookup_expr='icontains', label="Comments ", widget=TextInput(attrs= {'size': 15 } ))
role_title = CharFilter(field_name='role_title', lookup_expr='icontains', label="Role title ", widget=TextInput(attrs={'size': 15 } ))
date_range = DateRangeFilter(field_name="date_created", label="   Posted date ")
**rating = CharFilter(field_name="rating", lookup_expr='gte', label="Minimum rating ", widget=NumberInput(attrs={'size': 1 } ))**
class Meta:
    model = Review1
    fields = '__all__'
    exclude = {'recruiter', 'date_created', 'user'}

I have this:

Screenshot - Look at "Minimum rating" box width

But I want this:

Screenshot with filter search bar - Look at "Minimum rating" box width

noobMark
  • 1

2 Answers2

0

I found a solution in the thread below by using the attribute - "style" : 'width6ch'

Apparently NumberInput doesn't have a working "size" attribute in HTML yet.

Solution to my problem

noobMark
  • 1
0

You cannot directly style the django-filters search fields. I was stuck with the same problem and here is my way of solving it.

Step 0 : intall widget_tweaks by pip install django-widget-tweaks

step 1 : add widget_tweaks to INSTALLED_APPS in your settings.py

step 2 : add {% load widget_tweaks %} into your template.html

step 3 : style individual elements in template

    <div class="form-group col-sm-4 col-md-3">
        {{ filter.form.comments.label_tag }}
        {% render_field filter.form.comments class="form-control" %}
    </div>
   <div class="form-group col-sm-4 col-md-3">
        {{ filter.form.role_title.label_tag }}
        {% render_field filter.form.role_title class="form-control" %}
    </div>

this way you can style individual form elements from filters, you can also add html tag attributes such as type or class and style them based on your needs.

you can use this link for reference. Link for Reference

Eshwar
  • 1
  • 1
  • 2