django-crispy-forms / django-crispy-forms

The best way to have DRY Django forms. The app provides a tag and filter that lets you quickly render forms in a div format while providing an enormous amount of capability to configure and control the rendered HTML.
http://django-crispy-forms.rtfd.org
MIT License
5.01k stars 730 forks source link

Unable to use multiple Template Packs #1401

Open jsolum opened 1 week ago

jsolum commented 1 week ago

Description:

The docs say you can manually set a template pack on a specific form (here) with this syntax: {{ myform|crispy:"bootstrap4" }}

However, it only seems to generate the correct HTML for the template pack that is set with the CRISPY_TEMPLATE_PACK.

For example:

  1. Installing 3 template packs: bootstrap5, tailwind, and bulma
  2. Set the proper settings:
    
    INSTALLED_APPS = [
    ...
    'crispy_forms',
    "crispy_bootstrap5",
    "crispy_tailwind",
    "crispy_bulma",
    ]

CRISPY_ALLOWED_TEMPLATE_PACKS = ("bootstrap5", "tailwind", "bulma") CRISPY_TEMPLATE_PACK = "bootstrap5"

3. Create a simple form
```python
class NameForm(forms.Form):
    your_name = forms.CharField(label="Your name", max_length=100)
  1. Render it 3 times with each template pack:

    {% load crispy_forms_tags %}
    {{ form|crispy:'bootstrap5' }}
    {{ form|crispy:'tailwind' }}
    {{ form|crispy:'bulma' }}
  2. changing the CRISPY_TEMPLATE_PACK from bootstrap5 to tailwind to bulma changes the output. For example: When set to CRISPY_TEMPLATE_PACK='bootstrap5' the HTML looks like:

    ...
    <input type="text" name="your_name" maxlength="100" class="textinput form-control" required="" id="id_your_name">
    ...
    <input type="text" name="your_name" maxlength="100" class="textinput form-control" required="" id="id_your_name">
    ...
    <input type="text" name="your_name" maxlength="100" class="textinput form-control" required="" id="id_your_name">
    ...

But when the CRISPY_TEMPLATE_PACK='tailwind the HTML looks like:

<input type="text" name="your_name" maxlength="100" class="textinput form-control" required="" id="id_your_name">
...
<input type="text" name="your_name" maxlength="100" class="textinput form-control py-2 border-gray-300 block appearance-none focus:outline-none px-4 rounded-lg leading-normal w-full text-gray-700 bg-white border" required="" id="id_your_name">
...
<input type="text" name="your_name" maxlength="100" class="textinput form-control py-2 border-gray-300 block appearance-none focus:outline-none px-4 rounded-lg leading-normal w-full text-gray-700 bg-white border" required="" id="id_your_name">
...

It seems like what the CRISPY_TEMPLATE_PACK is set to should not affect the render of the form since the template pack is manually set in the template.

For reference here is a minimal django project replicating this issue with the above code: https://github.com/jsolum/crispy-form-testing