Open tobyporter opened 2 years ago
I figured it out.
I was running django-tailwind in JIT mode which only builds the css for what's in your templates. Switching to AOT mode builds the complete tailwind css.
tailwind.config.js
/**
* Stylesheet generation mode.
*
* Set mode to "jit" if you want to generate your styles on-demand as you author your templates;
* Set mode to "aot" if you want to generate the stylesheet in advance and purge later (aka legacy mode).
*/
mode: "aot",
The forms are now styled correctly - except for the double down arrow on the select lists. Why is this happening??
@tobyporter I had the same problem. Go into your tailwind.config.js and comment out require('@tailwindcss/forms')
. At least that worked for me.
I guess this is an issue with this layout crispy_tailwind/templates/tailwind/layout/select.html
.
I had the same problem. Fixed it by overriding the crispy_tailwind/templates/tailwind/layout/select.html
file as following -
{% load crispy_forms_filters %}
{% load l10n %}
<div class="relative">
<select class="{% if field.errors %}border border-red-500 {% endif %}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="{{ field.html_name }}" {{ field.field.widget.attrs|flatatt }}>
{% for value, label in field.field.choices %}
{% include "tailwind/layout/select_option.html" with value=value label=label %}
{% endfor %}
</select>
</div>
</div>
This new file will need to be saved at templates/tailwind/layout/select.html
file. Here I have just removed the div
containing the svg icon for the dropdown.
The following is the original code from crispy_tailwind/templates/tailwind/layout/select.html
file -
{% load crispy_forms_filters %}
{% load l10n %}
<div class="relative">
<select class="{% if field.errors %}border border-red-500 {% endif %}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="{{ field.html_name }}" {{ field.field.widget.attrs|flatatt }}>
{% for value, label in field.field.choices %}
{% include "tailwind/layout/select_option.html" with value=value label=label %}
{% endfor %}
</select>
<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"/></svg>
</div>
</div>
</div>
Also, the following should be in your template settings.
"DIRS": [
BASE_DIR / "templates",
],
@tobyporter I had the same problem. Go into your tailwind.config.js and comment out
require('@tailwindcss/forms')
. At least that worked for me.
After tinkering around with the issue, I think this should be the solution. The issue is not with crispy-tailwind. The issue is coming form the form styling of django-tailwind.
This tailwind.config.js file resides in theme/static_src directory.
I'm not sure whether it's a crispy-forms issue or a django-tailwind issue. My fix was to
crispy_tailwind/templates/tailwind/layout/select.html
file to my app templates at <app>/templates/tailwind/layout/select.html
div
containing the svg
</div>
require('@tailwindcss/forms')
in <app>/static_src/tailwind.config.js
Longer description:
This is the original crispy-form's template. Notice the superfluous </div>
at the end.
{% load crispy_forms_filters %}
{% load l10n %}
<div class="relative">
<select class="{% if field.errors %}border border-red-500 {% endif %}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="{{ field.html_name }}" {{
field.field.widget.attrs|flatatt }}>
{% for value, label in field.field.choices %}
{% include "tailwind/layout/select_option.html" with value=value label=label %}
{% endfor %}
</select>
<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"/>
</svg>
</div>
</div>
</div>
There's two things you can do when copying the above file to your own app templates directory.
</div>
and comment out require('@tailwindcss/forms')
in <app>/static_src/tailwind.config.js
. My issue with that was that regular input fields had no padding anymore;<div>
containing the <svg>
(and that final superfluous </div>
), and keep require('@tailwindcss/forms')
.That's what I did, and this is what the template in <my-app>/templates/tailwind/layout/select.html
now looks like
{% load crispy_forms_filters %}
{% load l10n %}
<div class="relative">
<select class="{% if field.errors %}border border-red-500 {% endif %}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="{{ field.html_name }}" {{
field.field.widget.attrs|flatatt }}>
{% for value, label in field.field.choices %}
{% include "tailwind/layout/select_option.html" with value=value label=label %}
{% endfor %}
</select>
</div>
there's a fix here that removes the SVG entirely: https://github.com/django-crispy-forms/crispy-tailwind/pull/112
I had success with copying and overriding the template to remove the extra </div>
and to change the SVG's containing div to use px-3
instead of px-2
The select works (now) AFAIK and we got some updates the other day on this widget. So, does anybody still has some things that should be tackled? Otherwise, I'd close this ticket soon.
Hi
I've installed tailwind, crispy_forms & crispy_tailwind but the form styling doesn't seem to be working and I get huge SVG arrow appearing underneath.
settings.py
my_form_template.html
I've tried with/without the form tags and with/without
{% load crispy_forms_tags %}
- neither have any effect. Any ideas what I'm missing?Thanks