1

Update: I appreciate all the suggestions. This seems to be a known issue (GitHub). A suggested workaround is to simply ignore the inserted element with the following rule in my css:

select ~ .pointer-events-none { display: none !important; }

Hopefully the bug will be addressed in a future release of crispy-forms.

(end of update)

I'm using:

  • Django 5.2.1
  • Tailwind CSS 4.0
  • crispy-tailwind 1.0.3
  • django-crispy-forms 2.4

I am using the Tailwind template pack, which is defined in my settings.py. When I render my form in my template 'concert_form.html' using crispy-forms, a large upside-down caret symbol appears after one of the fields in the middle of the form. If I comment out crispy-forms, then the form renders properly. Using the developer tools, with crispy-forms active, I can see there is a new in the code with an svg definition. That is not present with crispy-forms inactive. The only CSS I'm using is what is generated from the tailwind --watch command. Is there any way I can control crispy-forms to prevent this from happening?

Here are the relevant code sections: concert_form.html

html {% extends "_base.html" %} {% load tailwind_filters %} ... <div class="bg-white rounded-lg shadow-lg p-6"> <form method="post" class="space-y-6"> {% csrf_token %} {% form|crispy %} <div class="flex justify-end space-x-3 pt-4"> ... the balance of the code, navigation buttons to 'Cancel' or 'Submit' the form

models.py

python from django.db import models from django.urls import reverse class ConcertForm(forms.ModelForm): name = models.CharField(max_length=100) date = models.DateField() time = models.TimeField() venue = models.ForeignKey(Venue, on_delete=models.CASCADE) conductor = models.ManyToManyField(Conductor, blank=True) guests = models.ManyToManyField(Guest, blank=True) description = models.TextField(blank=True) poster = models.ImageField( upload_to="posters/", blank=True, null=True, ) def __str__(self): return self.name def get_absolute_url(self): return reverse("concert_detail", args=[str(self.id)]) class Meta: ordering = ["date"]

forms.py

from django import forms from .models import Concert class ConcertForm(forms.ModelForm): class Meta: model = Concert fields = "__all__" widgets = { "date": forms.DateInput(attrs={"type": "date"}), "time": forms.TimeInput(attrs={"type": "time"}), "conductor": forms.SelectMultiple(), "guests": forms.SelectMultiple(), }

settings.py

python ... INSTALLED_APPS = [ ... "crispy_forms", "crispy_tailwind", ] CRISPY_ALLOWED_TEMPLATE_PACKS = "tailwind" CRIPSY_TEMPLATE_PACK = "tailwind"

Rendered HTML for the area of concern

<select class="bg-white focus:outline-none border border-gray-300 rounded-lg py-2 px-4 block w-full appearance-none leading-normal text-gray-700" name="venue" id="id_venue" required=""> <option value="">---------</option> <option value="1" selected="">East Lansing High School</option> <option value="2">Lansing Eastern High School</option> </select> (NOTE: The code below is the <div> inserted with crispy-forms is active) <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700"> <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"> <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"></path> </svg> </div>

Screenshot: Screenshot of the section from the rendered page

I've tried removing the crispy-forms from the file which causes the page to render normally, but lacking the crispy-form formatting. I've inspected the rendered page in the developer tools. The "caret " only occurs with crispy-forms active.

Improve this question
2
  • 1
    This link seems to describe a similar issue to yours — have you looked into it already? Commented May 16 at 13:27
  • Are you sure this caret belongs to the Venue field? Since it has absolute positioning, it's possible that it belongs to another element. Can you check this in the Developer Console? Commented May 17 at 6:33

1 Answer 1

Reset to default
0

So the caret should be aligned to a relatively positioned parent, and it should be sized down relative to that parent.

Here is the source caret element: ./tailwind/layout/select.html #L16-L18, here is the source caret element, where the relative parent can also be found.

The parent <div class="relative">...</div> that wraps both the <select> and the <svg> elements is missing from the question. If that wrapper were present, the relative class might be functioning incorrectly or possibly being overridden.

Note: This project is still in its early stages of development.

In v1.0.3, stray closing <div> tags were also fixed. It's possible that a similar stray closing tag is causing the relative parent to close without any children, and as a result, the <select> and <svg> elements are being inserted into the DOM separately, without being grouped together.

<div class="relative"></div> <select>...</select> <!-- As a result, the caret aligned and sized with absolute is not positioned relative to the direct parent of the <select>, but rather to the <form> or an even more distant ancestor --> <div class="pointer-events-none absolute ..."> <svg><path d="..."></path></svg> </div>

Expected:

<div class="relative"> <select>...</select> <!-- Now it is aligned relative to the parent div.relative --> <div class="pointer-events-none absolute ..."> <svg><path d="..."></path></svg> </div> </div>
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

This is great information @rozsazoltan. However, there is no parent in this case, the caret has just been inserted into the output with no accompanying field. This appears to be a known issue (see github.com/django-crispy-forms/crispy-tailwind/issues/128). I ended up doing an ugly workaround of ignoring .pointer-events-none in my css file. select ~ .pointer-events-none { display: none !important; }

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.