Search code examples
htmldjangobootstrap-4django-crispy-forms

Django Crispy Forms does not display the border of a certain field


I am using bootstrap and crispy forms to style my website. But a border around all my username fields dont get displayed. Like shown here (I cut off some parts). It is confusing to me, as all other fields get displayed properly:

Missing border

My Code (Form / HTML / View) looks like:

class LWRegisterForm(UserCreationForm):
    email = forms.EmailField(required=True)

    class Meta:  
        model = LWUser
        fields = ['username', 'email', 'password1', 'password2']

.

    ... 
    <form method="POST">
        {% csrf_token %}
        <fieldset class="form-group">
            {{ form|crispy }}
        </fieldset>
        <div class="form-group">
            <button class="btn btn-dark" type="submit">{% trans "Register" %}</button>
        </div>
    </form>

.

...
def get(self, request):
    form = LWRegisterForm()
    context = {'form': form}
    return render(request, 'users/register.html', context)

In order to fix it I tried in the HTML to use {% crispy update_form %} and {{ update_form.username|as_crispy_field }} instead of my code. Both still displayed it without a border.

I also tried swapping around the order of things that get displayed with

{{ update_form.email|as_crispy_field }}
{{ update_form.username|as_crispy_field }}

but still the username field was without a border.

I tried reinstalling django-crispy-forms via pip unistall. Did not work.

Now I am out of ideas. What could it be?


Solution

  • try something like this i also sume you load that you form properly in template

     <form method="POST" action="">
            {% csrf_token %}
                <div class='col-lg-6'>{{ update_form.username|as_crispy_field }} 
                </div>
                 <div class='col-lg-6'>{{ update_form.email|as_crispy_field }}</div>
                 </div>
                <button class="btn btn-dark" type="submit">{% trans "Register" %} 
             </button>
            </div>
        </form>
    

    if this still doesn't work for you use widgets in forms.py for giving broder to username