twitter bootstrap 3 - form-horizontal not working with django-crispy-forms and django-registration-redux -
disclaimer: i'm complete novice django , python.
i'm using crispy forms django registration redux. i've applied form-horizontal subclass of registration form doesn't render labels on same line input fields can see here: http://imgur.com/hdrpei9
i've hard coded form-horizontal html in template shifts form contents outside of container: http://imgur.com/kqikq7q
i've tried creating sublclass form called supplyhelixregistrationform includes label , field classes crispy forms docs says include: (would include link don't have enough reputation)
part of forms.py registration redux app includes modifications:
from crispy_forms.helper import formhelper crispy_forms.layout import layout, div, submit, html, button, row, field crispy_forms.bootstrap import appendedtext, prependedtext, formactions user = usermodel() class registrationform(usercreationform): required_css_class = 'required' email = forms.emailfield(label=_("e-mail")) class meta: model = user fields = (usernamefield(), "email") class supplyhelixregistrationform(registrationform): def __init__(self, *args, **kwargs): super(supplyhelixregistrationform, self).__init__(*args, **kwargs) self.helper = formhelper() self.helper.form_class = 'form-horizontal' self.helper.label_class = 'col-lg-2' self.helper.field_class = 'col-lg-8'
then modified registration redux views.py point supplyhelixregistrationform:
registration_form_path = getattr(settings, 'registration_form', 'registration.forms.supplyhelixregistrationform') registration_form = import_string( registration_form_path )
and here's template:
{% extends "registration/registration_base.html" %} {% load i18n %} {% load crispy_forms_tags %} {% crispy registrationform registrationform.helper %} {% block title %}{% trans "register account" %}{% endblock %} {% block content %} <div class="container vertical-center"> <div class="col-sm-6 col-sm-offset-3"> <div class="panel formbackground"> <div class="panel-heading text-center"> <h2>transform supply chain today!</h2> </div> <div class="panel-body"> <form method="post" action=""> {% csrf_token %} {{ form|crispy}} <input class="btn btn-lg btn-primary btn-block" type="submit" value="{% trans 'register now' %}" /> </form> </div> </div> </div> </div> {% endblock %}
i appreciate can provide. in advance!
the issue you're rendering form crispy templating, because you're using template variable ({{ some_variable }}
)rather using {% crispy form_name %}
tag formhelper
attributes aren't getting applied properly.
try these changes:
- replace
{{ form | crispy }}
{% crispy form %}
. - add following attribute
formhelper
if want continue rendering<form></form>
tags manually:
self.helper.form_tag = false
you might need remove 2 lines attempting manually create
.form-horizontal
effect:self.helper.label_class = 'col-lg-2'
self.helper.field_class = 'col-lg-8'
...dcf automatically adding bootstrap .form-horizontal
css classes form, , these interfere automatic additions.
Comments
Post a Comment