I’m currently experiencing a weird issue that I can’t quite explain. I’m running Django 4.2 and am using Crispy Forms to try and render a form. I have two fields which render incorrectly - these are instances of forms.ModelChoiceField and forms.ChoiceField.
As I understand it, the output to the DOM should be HTML select elements; however I am seeing a select element as well as an input element. The input element is has the read only attribute but it really shouldn’t be rendered as the result is two slightly different drop-down lists for the same field. Changing either one of these results in the other being updated.
The relevant HTML is merely: -
<div class="container">
<h5>Register</h5>
{% crispy form %}
</div>
I’m importing Layout from Crispy Forms but quite baffled by this behaviour. I’ve searched far and wide but can’t find a solution so I’m wondering, has anyone seen this before or might know what might be going on?
Thanks for the quick response. I’m currently trying Bulma. I believe I had the same issue with Bootstrap5 and it doesn’t seem to make a difference whether I use Layout from Bulma or Crispy (I think the Bulma one doesn’t extend Field from Crispy)
I’ve never looked at Bulma, but I can report that I’ve never seen that behavior with the Bootstrap packs. (That’s what I use.)
I’d suggest re-verifying it with Bootstrap5.
If you do recreate the issue with the Bootstrap5 pack, please show what versions (full 3-part numbers as appropriate) of Python, Django, Crispy, and crispy-bootstrap5 you are using, because this does seem like it would be “form template”-related.
Here’s settings.py at the commit I’m currently working on (forgive the absolute mess - I’m currently migrating from Django v2 and moving a lot of things round).
then it fixes the issue when using the Bootstrap5 template pack, so that’s amazing.
However, that wasn’t present in my Bulma template pack commit so I wonder if that template pack is just broken too. Weird. Well, maybe that’s a sign that I should stick with Bootstrap then?
My guess would be that there’s some kind of conflict or competing precedence between the two rather that either one being fundamentally “broken”.
I’ve never used “Bulma” so I have no comment on it. However, I’d want to check the fundamentals before assuming the pack is broken. Check for other JS / css / template files that may be defined elsewhere. Check the order of the INSTALLED_APPS. Look at the page as it has been rendered and delivered to the browser. Check the repo for that template pack for known issues or other possible known pain points.
Browsers are finicky. There are a lot of things that can change just because of the order in which things are loaded, and it’s not particularly obvious that that’s what’s happening in any given situation.
So I’d guess the real question is how important is that template pack to you and whether it’s worth your time and effort to investigate.
I think I have found the actual conflict - for anyone else who may come across this.
It was the js bundle that comes with Materialize CSS. Funnily enough, I was refactoring some forms because some packages I was using for Materialize were broken from, I can’t remember if it was, Django 3 or 4, so I was going to move forms to Bootstrap/Bulma but keep the main site CSS as Materialize. Looks like I’ll be ditching Materialize altogether as it’s now clashing with the crispy template packs. Ah well.
Another is to change the order in which the css files are being loaded. It’s possible that the worst of the side effects could be mitigated by doing that.
The third would be to identify the selectors causing the problems, and make changes accordingly.
It all depends upon just how important these are to you.