django-crispy-forms / crispy-tailwind

A Tailwind template pack for django-crispy-forms
MIT License
331 stars 56 forks source link

Bug fix - select layout double dropdown icon #114

Closed farhanmasud closed 2 years ago

farhanmasud commented 2 years ago

Fix for the problem mentioned on the first comment on issue #110.

farhanmasud commented 2 years ago

@smithdc1, could you please check if this fix is in the right direction?

farhanmasud commented 2 years ago

So it seems that it's failing the following 3 tests -

FAILED tests/test_filter.py::CrispyFilterTests::test_crispy_filter - Assertio...
FAILED tests/test_helper.py::CrispyHelperTests::test_select - AssertionError:...
FAILED tests/test_table_inline_formset.py::CrispyHelperTests::test_table_inline_formset

Specifically, all of these three are failing at self.assertHTMLEqual() method where the HTML rendered from the forms is checked against a provided HTML where the 3 lines for showing the icon still exist.

I have removed the SVG icon for the drop down because when styling with tailwind, I'm getting a styled select element with a svg icon for the dropdown arrow. The following screenshot if from the generated styles.css file from django-tailwind package.

Screenshot from 2022-02-20 17-47-06

Please note that the above screenshot if after overriding crispy-tailwind template with removed svg icon.

And as the icon is define in the CSS rules and it's not a browser specific styling, appearance-none class has no effect if used here.

When I'm trying Tailwind on this codepen or a project where tailwind installed with npm, it doesn't come with any svg icon on styling the select element.

So the question is now where this svg icon is coming from. Tailwind CSS probably doesn't ship with this styling. I don't have any other CSS file / rules in this page other than the CSS file generated by django-tailwind.

I have just also checked with my another django project where django-tailwind package is installed and no crispy forms packages are there - there is the same icon appearing on the select elements. I guess it's coming from the django-tailwind package after all.

Just to end on the note of the original issue. The original issue was that crispy-tailwind was rendering two overlapping icons on the select element. Screenshot below -

Screenshot from 2022-02-20 17-51-58

This PR is probably not solving the issue but I'll keep looking for the actual issue that's causing it. @smithdc1, if you have any insights about this, please let me know.

farhanmasud commented 2 years ago

After tinker around with the issue, I think this should be the correct solution to this. This is not a crispy-tailwind issue. This is happening due to the styling applied on django-tailwind package.

This tailwind.config.js file resides in theme/static_src directory.

Closing PR.