I don’t know, maybe, I’m asking something obvious, but I rarely address front-end side of projects, so this mistake is new for me.
I have a site made with Django and on this site I have a page with a register form. I want all rows of it to be organised one under another, aligned by the beginning of their input fields.
The file structure of the project (maybe the problem lies here):
django_project
|-.venv/.idea/...
|-.django_project
|-static
|-css
|-styles.css
|-templates
|-inc
|-base.html
|-asgi/settings.py/urls.py/wsgi.py
|-usersapp
|-migrations
|-templates
|-usersapp
|-login.html
|-register.html
|-logout.html
|-(and so on)
|-admin.py/apps.py/consts.py/forms.py/models.py/tests.py/urls.py/views.py
Corresponding form class from forms.py:
class RegisterUserForm(UserCreationForm):
username = forms.CharField(label="Имя пользователя", widget=forms.TextInput(attrs={'class': 'form-input'}))
password1 = forms.CharField(label="Пароль", widget=forms.PasswordInput(attrs={'class': 'form-input'}))
password2 = forms.CharField(label="Повторно введите пароль", widget=forms.PasswordInput(attrs={'class': 'form-input'}))
class Meta:
model = get_user_model()
fields = ['username', 'email', 'first_name', 'last_name', 'password1', 'password2']
labels = {
'email': 'E-mail',
'last_name': 'Фамилия',
'first_name': 'Имя',
'patronymic': 'Отчество'
}
widgets = {
'email': forms.TextInput(attrs={'class': 'form-input'}),
'last_name': forms.TextInput(attrs={'class': 'form-input'}),
'first_name': forms.TextInput(attrs={'class': 'form-input'}),
'patronymic': forms.TextInput(attrs={'class': 'form-input'})
}
def clean_email(self):
email = self.cleaned_data['email']
if get_user_model().objects.filter(email=email).exists():
raise forms.ValidationError("Такой E-mail уже существует!")
return email
The register form template (register.html):
{% extends 'base.html' %}
{% block content %}
<h1>Register</h1>
<div class="form-container">
<div class="row">
<form method="post">
{% csrf_token %}
<input type="hidden" name="next" value="{{ next }}" />
<div class="form-error">{{ form.non_field_errors }}</div>
{% for f in form %}
<p><label for="{{ f.id_for_label }}">{{ f.label }}</label>{{ f }}</p>
<div class="form-error">{{ f.errors }}</div>
{% endfor %}
<p><button type="submit">Register</button></p>
</form>
</div>
</div>
{% endblock %}
base.html:
{% load static %}
<!DOCTYPE html>
<html>
<head>
<link type="text/css" href="{% static 'css/styles.css' %}" rel="stylesheet"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>{{title}}</title>
</head>
<body id="third">
<header>
{% include 'inc/_timedate.html' %}
{% include 'inc/auth.html' %}
{% include 'inc/_navbar.html' %}
</header>
{% block content %}
{% endblock %}
{% block pagination %}
{% endblock %}
</body>
</html>
Corresponding CSS classes:
<...(CSS resets and so on)>
#third {
background-color: #1B182B;
background-image: url("{% static 'media/cdwdi.webp' %}");
background-size: 1370px 610px;
background-position: 50% 0;
background-repeat: no-repeat;
}
<...(navbar styles and so on)>
.container-posts {
margin-left: 50px;
margin-top: 10px;
padding: 5px 5px 5px 5px;
color: white;
}
.form-container {
display: grid;
grid-template-columns: 100px 1fr;
align-items: center;;
gap: 15px 10px;
max-width: 400px;
margin-left: 50px auto;
margin-top: 10px;
padding: 5px 5px 5px 5px;
border-radius: 8px;
color: white;
}
.row {
margin-top: 20px;
}
If to put a container-posts class in the first div block, it kind of works - it aligns rows, though not by the center of their input fields, but by the beginning of their labels. container-posts class wasn’t designed to style the forms, so it shouldn’t work here the way I expect it to.
But if to put a form-container class in the first div block, styles cease to work for the whole form (text turns black, labels slide to the left edge of a page, no alignment at all). I’ve googled fot it and tried to code it from grid, flex and other display layouts, but with no success.
That’s why I humbly ask for your advice, and, if possible, an explanation why does your solution work this way. If any additional information is required to make the problem clear, please tell me and I will provide it.
