Can different classes and attributes be applied on a single label in crispy forms?
This is my first time using crunchy molds. And I want to use a separate one css_class
for each label according to their length. And also want to use css property for label and corresponding fields. I tried various methods but failed. Please help me.
forms.py
''' ~~~ Import Statements ~~~ '''
from django import forms
from crispy_forms.helper import FormHelper
from crispy_forms.layout import Submit, Layout, Field ,Fieldset,Div,Row,Reset,Button
from crispy_forms.bootstrap import (PrependedText, PrependedAppendedText,InlineField, FormActions)
class student_personal_infoForm(forms.Form):
first_name = forms.CharField(label="First Name",required=True,max_length=20, widget = forms.TextInput(attrs={'placeholder':'First Name', 'required':True}))
middle_name = forms.CharField(label="",required=False,max_length=20, widget = forms.TextInput(attrs={'placeholder':'Middle Name'}))
last_name= forms.CharField(label="", required=True,max_length=20,widget = forms.TextInput(attrs={'placeholder':'Last Name', 'required':True}))
father_name = forms.CharField(label="Father Name", required=True,max_length=20,widget = forms.TextInput(attrs={'placeholder':'Father Name', 'required':True}))
mother_name = forms.CharField(label="Mother Name", required=True,max_length=20,widget = forms.TextInput(attrs={'placeholder':'Mother Name', 'required':True}))
helper = FormHelper()
helper.form_method = 'POST'
helper.label_class = 'col-md-4'
helper.form_class = 'form-inline'
helper.field_class = 'col-md-4 control-label'
helper.layout = Layout(
Div(
Row(
Field('first_name',css_class='control-label'),
Field('middle_name',css_class='control-label'),
Field('last_name',css_class='control-label'),
css_class='row-fluid divs panel')
),
Div(
Row(
Div(
Field('father_name', css_class='control-label'),
css_class='pull-left'),
Div(
Field('mother_name', css_class='control-label'),
css_class='col-md-6'),
css_class='row-fluid divs panel')
),
)
Using this code, my form looks very ugly because it is not well aligned. Please suggest me a solution.
+3
source to share