Closed farhanmasud closed 2 years ago
@smithdc1, could you please check if this fix is in the right direction?
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.
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 -
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.
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.
Fix for the problem mentioned on the first comment on issue #110.