时间戳

首页 > 解决方案 > How to fix the labels positioned wrong in my default Django form?

html - How to fix the labels positioned wrong in my default Django form?

问题描述

I created a signup page and a login page. For this, I used django's default authentication features and forms. To modify a bit I used crispy forms but my labels are positioned wrong on my screen. I have attached an image of my signup page where you can see the labels username, password, password again is positioned wrong.

Signup page

here's my signup.html

{% extends 'base.html' %}
{% load static %}
{% load crispy_forms_tags %}
{% block content %}


<body>
    <div class="container">
        <div class="col-md-6 mx-auto text-center">

            <img src="{% static 'pd/images/logo.png' %}" style="width:300px;">
            <h2>Welcome to Panasonic Energy</h2>

        </div>
        <div class="row">
            <div class="col-md-4 mx-auto">
                <div class="myform form ">
                    <form method="post">
                        {% csrf_token %}
                        {{ form|crispy }}


                        <div class="text-center ">
                            <button type="submit" class=" btn btn-block send-button tx-tfm">Create Your Free Account</button>
                        </div>
                        {% if form.errors %}
                        <p class=" label label-danger">
                            Please try again.
                        </p>
                        {% endif %}

                    </form>
                </div>
            </div>
        </div>
    </div>
</body>
{% endblock %}

and this is my signup.css. I thought the problem was in my css as the label affecting styles may be overriding Django's default styles so I commented them out but still, the problem remains.

.send-button {
    background: #54C7C3;
    width: 100%;
    font-weight: 600;
    color: #fff;
    padding: 8px 25px;
}

/* input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
} */

/* .g-button {
    color: #fff !important;
    border: 1px solid #EA4335;
    background: #ea4335 !important;
    width: 100%;
    font-weight: 600;
    color: #fff;
    padding: 8px 25px;
} */

/* .my-input {
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
    cursor: text;
    padding: 8px 10px;
    transition: border .1s linear;
} */

/* .header-title {
    margin: 5rem 0;
} */

h1 {
    font-size: 31px;
    line-height: 40px;
    font-weight: 600;
    color: #4c5357;
}

h2 {
    color: #5e8396;
    font-size: 21px;
    line-height: 32px;
    font-weight: 400;
}

/* .login-or {
    position: relative;
    color: #aaa;
    margin-top: 10px;
    margin-bottom: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
} */
/* 
.span-or {
    display: block;
    position: absolute;
    left: 50%;
    top: -2px;
    margin-left: -25px;
    background-color: #fff;
    width: 50px;
    text-align: center;
} */

.hr-or {
    height: 1px;
    margin-top: 0px !important;
    margin-bottom: 0px !important;
}

@media screen and (max-width:480px) {
    h1 {
        font-size: 26px;
    }

    h2 {
        font-size: 20px;
    }
}

Please help me fixing the position of these labels. Thanks in advance...

标签： htmlcssdjangodjango-forms

解决方案

you should render form as {% crispy form %} as you have loaded the crispy form tag at top not like {{ form|crispy}} and you dont need to add <form> tag as you are building it in {% crispy form %}. So some of html is also redundant and you can generate the submit button in crispy form itself like 

from crispy_forms.helper import FormHelper
from crispy_forms.layout import Submit
class SignUpForm(forms.Form):

 Username=forms.CharField(required=True)
 Password=forms.CharField(widget=forms.PasswordInput,required=True)
 Confirm_Password=forms.CharField(widget=forms.PasswordInput,required=True)
 def __init__(self,*args,**kwargs):
    super(SignUpForm,self).__init__(*args)
    self.helper=FormHelper()
    self.helper.method='POST'
    self.helper.add_input(Submit('gobtn','Login',css_class='btn-success'))
 def clean(self):
     cleaned_data = super(SignUpForm, self).clean()
     password = cleaned_data.get('Password')
     password_confirm = cleaned_data.get('Confirm_password')
     if password != password_confirm:
           raise forms.ValidationError("The two password fields must match.")
     return cleaned_data

and make sure you pass it in you view like

def myview(request):
    #your logic here
    context={}
    if request.method == "GET":
        context['form']= SignUpForm()
    else:
        #POST request block
        if SignUpForm(request.POST).is_valid():
           #do what you like here
        else:
           #if form is invalid  
           context['form']= SignUpForm(request.POST) # this will render if validation errors so you can remove your if errors block in html

    render(request,'template_name.html',context)

推荐阅读