I have the following form:
class RehabilitationSessionForm(forms.ModelForm):
def __init__(self, *args, **kwargs):
# user = kwargs.pop('user', None)
super(RehabilitationSessionForm, self).__init__(*args, **kwargs)
self.helper = FormHelper()
self.helper.form_method = 'post'
self.helper.add_input(Submit('submit', u'Guardar'))
class Meta:
model = RehabilitationSession
widgets = {
'pain_extremity':forms.RadioSelect,
'upper_extremity':forms.RadioSelect,
}
fields = ['patient', 'medical', 'therapist', 'date_session_begin',
'upper_extremity', 'pain_extremity','movement_up','movement_down',
'movement_left','movement_right',
'games','game_levels','iterations','game_observations','patient_behavior',
'observations','period','date_session_end', ]
I want to be able to render all these fields in my html template, separately, that is, to locate each field in html divs
specific.
I'm working with django-crispy-forms and bootstrap-3
At the moment, I am rendering the fields in a separate way, using the {{ form.<nombre-del-campo> }}
tag ie rendering the fields manually like this:
<div class="row">
<div class="col-md-2 pacient-pic">   <img class="img-circle " src="{{ sessionedit.patient.user.photo.url }}" alt="User Avatar"> </div>
{{ form.non_field_errors }}
<div class="col-md-3 col-xs-12 col-sm-6">
<ul class="pacient-ul">
{{ form.patient.errors }}
<li><strong>Paciente:</strong>  {{ form.patient }} </li>
</ul>
</div>
<div class="col-md-4 col-xs-12 col-sm-6">
<ul class="pacient-ul">
<li><strong>Terapeuta:</strong>  {{ form.therapist }}</li>
<li><strong>Médico:</strong>  {{ form.medical }}</li>
</ul>
</div>
</div>
.
.
And so sucessively more divs and fields
But this causes me to lose the effect or the bootstrap styles, because I'm not using the RehabilitationSessionForm
class that is where the form is created using some attributes of crispy-forms
The result:
My form is displayed without the css and js effects of bootstrap-3
How can I render my form using django-crispy-forms?
UPDATE
If I have this in the base design template
<div class="box-body">
<div class="row">
<div class="col-md-2 pacient-pic">   <img class="img-circle " src="dist/img/user7-128x128.jpg" alt="User Avatar"></div>
<div class="col-md-3 col-xs-12 col-sm-6">
<ul class="pacient-ul">
<li><strong>Paciente:</strong>  Valentina Sepúlveda</li>
<li><strong>D.I:</strong>  1037548297</li>
</ul>
</div>
<div class="col-md-3 col-xs-12 col-sm-6">
<h4>Sesión N°</h4>
<h3 class="padding-left">1</h3>
</div>
<div class="col-md-4 col-xs-12 col-sm-6">
<ul class="pacient-ul">
<li><strong>Fecha de inicio:</strong>  12/01/1991 - 17:34 hs</li>
<li><strong>Terapeuta:</strong>  Bernardo</li>
<li><strong>Médico:</strong>  Christian</li>
</ul>
</div>
</div>
</div>
How could I render these fields from the __init__
method in the forms.py
?
I tried this:
class RehabilitationSessionForm(forms.ModelForm):
def __init__(self, *args, **kwargs):
super(RehabilitationSessionForm, self).__init__(*args, **kwargs)
self.helper = FormHelper()
self.helper.form_method = 'post'
#self.helper.add_input(Submit('submit', u'Guardar'))
self.helper.layout=Layout(
Div(
FormActions(
Submit('save', 'Save changes'),
css_class='box-body btn btn-success btn-sm pull-right fa fa-pencil',
),
Div('patient', css_class='col-md-3 col-xs-12 col-sm-6'),
Div('therapist', css_class='col-md-4 col-xs-12 col-sm-6'),
Div('medical', css_class='col-md-4 col-xs-12 col-sm-6'),
css_class='row',
)
)
And in my real template where the data arrive or where I paint the form with {% crispy form %}
, this is so
{% crispy form %}
<div class="box-body">
#<!--<div class="row">-->
<div class="col-md-2 pacient-pic">   <img class="img-circle " src="{{ sessionedit.patient.user.photo.url }}" alt="User Avatar">
</div>
{{ form.non_field_errors }}
#<!--<div class="col-md-3 col-xs-12 col-sm-6">-->
<ul class="pacient-ul">
{{ form.patient.errors }}
<li><strong>Paciente:</strong>  </li>
<li><strong>D.I:</strong>  {{ sessionedit.patient.identity_document }}</li>
</ul>
#<!--</div>-->
<div class="col-md-3 col-xs-12 col-sm-6">
<h4>Sesión N°</h4>
<h3 class="padding-left">{{ sessionedit.id }}</h3>
</div>
#<!--<div class="col-md-4 col-xs-12 col-sm-6"> -->
<ul class="pacient-ul">
<li><strong>Fecha de inicio:</strong>  </li>
<li><strong>Terapeuta:</strong>  </li>
<li><strong>Médico:</strong>  </li>
</ul>
#<!-- </div> -->
#<!-- </div> end row -->
</div>#<!-- /.box-body -->
In general, I continued to render, but I can not locate my css's well in the divs for the fields. For now my form is staying like this, in this url you can see that the fields are disorganized, but with the answer given by @ German-Alzate-Martinez I am already rendering the fields of my form using django-crispy-forms
and sending them from the __init__
method in my forms.py
.
Only that I have not found the interpretation of how to render everything.
Any help I appreciate