I’m sorry if this is the wrong group… not sure if crispy support is here or somewhere else. I’m using the Crispy Form helper to customize the form for a Django-Filter. Its working but I’m trying to fine-tune formatting, and can’t get my row height to be updated.
I’m stuck with a mb-3 row css class that I can’t seem to adjust. If I modify this in dev-tools it fixes what I’m trying to, but I can’t fiind the right way to modify this within the FormHelper Classes. Can someone point out what I’m doing wrong or have missed? I’m trying to remove the space below the filter dropdowns/labels and before the filter button (just visible in screen shot)
My Code
class VisitFilterFormHelper(FormHelper):
form_method = 'GET'
layout = Layout(
Row(
Column('patient__name',css_class='col-md-auto px-1'),
Column('provider__name',css_class='col-md-auto px-1'),
Column('paid_in_full',css_class='col-md-auto px-0'),
#Column('date__gt',css_class='col-md-auto'),
#Column('date__lt',css_class='col-md-auto'),
css_class='px-1 py-0 border'
),
Submit('submit', 'Apply Filter', css_class='btn-sm'),
)
html from Dev Tools
<div class="row px-1 py-0 border">
<div class="col-md-auto px-1">
<div id="div_id_patient__name" class="mb-3 row">
<label for="id_patient__name" class="col-form-label col-md-auto pr-0">Members</label>
<div class="col-md-auto pr-1 pl-0">
<select name="patient__name" class="form-control select form-select" id="id_patient__name">
<option value="" selected="">All Family Members</option>
<option value="1">Me</option>
<option value="2">You</option>
</select>
</div>
</div>
</div>
</div>
Which crispy template pack are you using? You might want to search the templates in that pack for that css class.
I don’t believe I’m specifying any specific template pack.
I lied… here is what i have
CRISPY_ALLOWED_TEMPLATE_PACKS = "bootstrap5"
CRISPY_TEMPLATE_PACK = "bootstrap5"
How is the best way to review and correct?
I prefer to think of it as “mis-remembered”. 
Anyway, you have a couple different options. Which one you choose depends upon how pervasive you want these changes to be.
This is all covered in the docs at Layouts — django-crispy-forms 2.0 documentation, but to give you some ideas, in roughly increasing degree of scope:
If it’s only one or two specific situations where you don’t want that being used, you can override the template being used for those elements.
Or, if it’s only a couple of elements you wish to change, you can override the templates for those layout objects.
Or, you can get creative and create new layout objects with whatever templates you want. (We’ve actually done this in a couple cases. It really isn’t too bad.)
Or, you could create an entirely new template pack, using an existing pack as a starting point.
What’s “best” for you is something only you can evaluate and decide.
LOL 
I’m not normally a web programmer so trying to understand lots of the Django/Readthedocs.io goes over my head unfortunately. My google searches lead me there, but my brain doesn’t find the answer.
Let me read those other docs you gave and see if I can get anywhere tonight. Thanks much for pointing me to some specific spots.
I’ve read through this a bit… but am still confused. I can’t figure out which template I should be overriding. The column.html doesn’t have what I’m looking for and I can’t figure out which of the field*.html I should be looking at. How do I peel the layers here to figure out?
Also, while I only load the bootstrap5 pack I have multiple layout folders in my virtual environment.
$ find . -name layout
./.venv/lib/python3.10/site-packages/crispy_forms/templates/bootstrap3/layout
./.venv/lib/python3.10/site-packages/crispy_forms/templates/uni_form/layout
./.venv/lib/python3.10/site-packages/crispy_forms/templates/bootstrap/layout
./.venv/lib/python3.10/site-packages/crispy_forms/templates/bootstrap4/layout
./.venv/lib/python3.10/site-packages/crispy_bootstrap5/templates/bootstrap5/layout
Unfortunately, I don’t know that plugin pack well enough to have a definitive answer.
However, just searching through the files for the string “mb-3”, I find it in crispy_bootstrap5/templates/bootstrap5/layout/field.html, among others. (The field.html template file is used in multiple locations.)
I’d try changing that one first, and see where it leaves you.
If I change that file directly in the virtualenv and then re-start my project, will that pickup and change on the website? I know it would be debugging step only, but so far my trials like that haven’t produced any results and I wondered if I was doing something wrong.
It should. If it doesn’t, then that’s an indication that something else is going on here.
Well, that field.html is the correct one. I tried to override it by copying into a new file within my templates folder and changing the couple of references of mb-3. When I try to use it like this below, I end up with poor HTML (i.e the div-id attribute is partial: div_). What did I miss?
layout = Layout(
Row(
Column('patient__name',css_class='col-md-auto px-1', template='visits/custom_field.html'),
Column('provider__name',css_class='col-md-auto px-1', template='visits/custom_field.html'),
Column('paid_in_full',css_class='col-md-auto px-0', template='visits/custom_field.html'),
Column('date__gt',css_class='col-md-auto', template='visits/custom_field.html'),
Column('date__lt',css_class='col-md-auto', template='visits/custom_field.html'),
css_class='px-1 py-0 border'
),
Submit('submit', 'Apply Filter', css_class='btn-sm'),
)
What does your custom template look like?
Exactly like the original - just changes mb-3 to mb-1. I can paste if you want… but just those changes and moved to a different directory.
I think the problem is that I’m assigning the ‘field’ template in place of the ‘column’ template. I haven’t been able to find examples of a Field() included in a Column(). All examples I see have Field() inside a Row().
I think I got it… Google didn’t help but the mouse over in VSCode, when I scrolled down, had and example.
class VisitFilterFormHelper(FormHelper):
form_method = 'GET'
layout = Layout(
Row(
Column(Field('patient__name', template='visits/custom_field.html'),
css_class='col-md-auto px-1',),
Column(Field('provider__name', template='visits/custom_field.html'),
css_class='col-md-auto px-1'),
Column(Field('paid_in_full', template='visits/custom_field.html'),
css_class='col-md-auto px-1'),
Column(Field('date__gt', template='visits/custom_field.html'),
css_class='col-md-auto px-1'),
Column(Field('date__lt', template='visits/custom_field.html'),
css_class='col-md-auto px-1'),
css_class='px-1 py-0 border'
),
Submit('submit', 'Apply Filter', css_class='btn-sm'),
)
1 Like
Ok, I think one issue here might be that you’re pointing a Column to your new template, not the template that a Column would normally use. A Column uses the template column.html
I think this is a case where you’re going to need to override that template specifically and allow it to be rendered in the normal process of things.
When you mentioned before about editing the packaged version of the template, did you try that? Did it give you the desired results?
If so, then that makes me more convinced that overriding that specific template is what’s necessary.
1 Like
Yes, editing that field.html directly in my venv produced the results I wanted.
I probably need to go back and re-read that second section you pointed out now. Since I’m not sure if I want that app-wide I didn’t want to completely override that field.html file.
Hi @baldpoem53
As you are using the same custom_field.html template for all of your fields it may be easier to set the field_template on your FormHelper class rather than on each field.
https://django-crispy-forms.readthedocs.io/en/2.0/form_helper.html#helper-attributes-you-can-set
I’m a maintainer of crispy-forms. I’ll have a look at an easier way to over-ride the mb-3 style as that’s been a common request for the Bootstrap5 pack. It’s fine in many cases, but there’s also many cases where it’s not!
p.s Ken – feel free to ping me on crispy-form queries. I tried to subscribe to the forms and api category in the week but immediately become overwhelmed by the amount of notifications!
Thank you! I’ll keep you in mind. (I think I’ve done a fair job of handling the routine or typical questions - I do rely upon Crispy a lot, but I appreciate knowing I have a backup for this when things go over my head.)
1 Like
