Use daisyUI component in django form

Using Django Templates & Frontend
1

Hi Everyone,

I am trying to use daisyui components for django model form, however, django does not render the components at all. Below is my code.

my model form:

from django import forms
from .models import Visitor

state_choices = {'VIC':'VIC','NSW':'NSW','WA':'WA'}

class VisitorForm(forms.ModelForm):
    class Meta:
        model = Visitor
        fields = ['name','whom_visiting','whom_representing','location']
        widget = {
            "name": forms.TextInput(attrs={'class':'input input-bordered w-full max-w-xs','placeholder':'Full Name',}),
            "whom_representing": forms.TextInput(attrs={'class':'input input-bordered w-full max-w-xs','placeholder':'Whom Representing'}),
            "whom_visiting": forms.TextInput(attrs={'class':'input input-bordered w-full max-w-xs','placeholder':'Whom Visiting'}),
            "location": forms.Select(choices=state_choices),
        }

my template:

{% block content %}
            <form action="">
                {% csrf_token %}
                <div class="flex flex-col gap-4 items-center">
                    
                    {{form}}
                
                   
                </div>
            </form>
    <br>
    <div class="flex justify-center gap-4">
        <a href="" class="btn">Check-In</a>
        <a href="{% url "visitor_menu" %}" class="btn">Back</a>
    </div>
{% endblock content %}

FYI, I use django-tailwind and include daisyui as pluggin (followed instructions in this link tailwind css - Can I add Daisy UI plugin to my django project? If yes , Please how do I do it? - Stack Overflow)

Thank you.

2

Hi,
I spotted a typo mistake where it is missing ā€œsā€ at the widgets, however, after this there still anything change. The form is still django default.

Any help is really appreciated.

Thank you all!

3

Please post the view that is rendering and using this form.

Also, verify in the browser that the necessary CSS and JS files are being loaded on the page.

4

Here are my views.py, template, and html inspection on browser

views.py

def visitor_check_in(request):
    form = VisitorForm()
    context = {}

    if request.method =="POST":
        form = VisitorForm(request.POST)
        if form.is_valid:
            print("save")
            form.save()
        return redirect(visitor_menu)
    
    context['form']=form
    return render(request, 'visitor_check_in.html',context)

template:

{% extends "visitor_base.html" %}
{% block address %}

{% endblock address %}

{% block content %}
            <form action="{% url "visitor_check_in" %}" method = "POST">
                {% csrf_token %}
                <div class="flex flex-col gap-4 items-center">  
                    {{form.name}}
                    {{form.whom_representing}}
                    {{form.whom_visiting}}
                    {{form.location}}

                </div>
                <br>
                <div class="flex justify-center gap-4">
                    <button type="submit" class="btn">Check In</button>
                    <a href="{% url "visitor_menu" %}" class="btn">Back</a>
                </div>
            </form>
    
    
{% endblock content %}

image
image1233Ɨ298 30.3 KB

5

The html image appears as if the proper css classes have been assigned to the input elements.

The next thing to check is to verify that the proper css and/or js files have also been loaded by the browser.

6

I found a trick for this issue through this link css - Django : Tailwind styling not applied to template variables with widget attributes - Stack Overflow

Thank you!