Fixing bootstrap3 checkboxes alignment for all device sizes

Fixes #225 and #267

Thanks to @pySilver for proposing a patch for `field.html` template.

crispy_forms/helper.py

@@ -202,7 +202,6 @@ def helper(self):
     field_template = None
     disable_csrf = False
     label_class = ''
-    label_size = ''
     field_class = ''
 
     def __init__(self, form=None):
@@ -345,10 +344,13 @@ def get_attributes(self, template_pack=TEMPLATE_PACK):
         items['disable_csrf'] = self.disable_csrf
         items['label_class'] = self.label_class
         items['field_class'] = self.field_class
-        label_size_match = re.match('col-lg-(\d+)', self.label_class)
-        if label_size_match:
+        # col-[lg|md|sm|xs]-<number>
+        label_size_match = re.search('(\d+)', self.label_class)
+        device_type_match = re.search('(lg|md|sm|xs)', self.label_class)
+        if label_size_match and device_type_match:
             try:
                 items['label_size'] = int(label_size_match.groups()[0])
+                items['bootstrap_device_type'] = device_type_match.groups()[0]
             except:
                 pass
 

crispy_forms/templates/bootstrap3/field.html

@@ -5,6 +5,9 @@
 {% else %}
     {% if field|is_checkbox %}
         <div class="form-group">
+        {% if label_class %}
+            <div class="controls col-{{ bootstrap_device_type }}-offset-{{ label_size }} {{ field_class }}">
+        {% endif %}
     {% endif %}
 	<{% if tag %}{{ tag }}{% else %}div{% endif %} id="div_{{ field.auto_id }}" {% if not field|is_checkbox %}class="form-group{% else %}class="checkbox{% endif %}{% if wrapper_class %} {{ wrapper_class }}{% endif %}{% if form_show_errors%}{% if field.errors %} has-error{% endif %}{% endif %}{% if field.css_classes %} {{ field.css_classes }}{% endif %}">
 		{% if field.label and not field|is_checkbox and form_show_labels %}
@@ -23,17 +26,11 @@
 
         {% if not field|is_checkboxselectmultiple and not field|is_radioselect %}
             {% if field|is_checkbox and form_show_labels %}
-                {% if label_class %}
-                    <div class="controls col-lg-offset-{{ label_size }} {{ field_class }}">
-                {% endif %}
                 <label for="{{ field.id_for_label }}" class="{% if field.field.required %} requiredField{% endif %}">
                     {% crispy_field field 'class' 'checkbox' %}
                     {{ field.label|safe }}
                     {% include 'bootstrap3/layout/help_text_and_errors.html' %}
                 </label>
-                {% if label_class %}
-                    </div>
-                {% endif %}
             {% else %}
                 <div class="controls {{ field_class }}">
                     {% crispy_field field %}
@@ -43,6 +40,9 @@
         {% endif %}
 	</{% if tag %}{{ tag }}{% else %}div{% endif %}>
     {% if field|is_checkbox %}
+        {% if label_class %}
+            </div>
+        {% endif %}
         </div>
     {% endif %}
 {% endif %}

crispy_forms/tests/runtests_bootstrap3.py

@@ -19,6 +19,7 @@ def runtests():
         'crispy_forms.TestBasicFunctionalityTags',
         'crispy_forms.TestFormHelper',
         'crispy_forms.TestBootstrapFormHelper',
+        'crispy_forms.TestBootstrap3FormHelper',
         'crispy_forms.TestFormLayout',
         'crispy_forms.TestBootstrapFormLayout',
         'crispy_forms.TestBootstrap3FormLayout',

crispy_forms/tests/test_form_helper.py

@@ -152,7 +152,6 @@ def test_html5_required(self):
         form.helper.html5_required = False
         html = render_crispy_form(form)
 
-
     def test_attrs(self):
         form = TestForm()
         form.helper = FormHelper()
@@ -386,7 +385,6 @@ def test_helper_custom_field_template(self):
 
 
 class TestUniformFormHelper(TestFormHelper):
-
     def test_form_show_errors(self):
         form = TestForm({
             'email': 'invalidemail',
@@ -439,7 +437,6 @@ def test_multifield_errors(self):
 
 
 class TestBootstrapFormHelper(TestFormHelper):
-
     def test_form_show_errors(self):
         form = TestForm({
                 'email': 'invalidemail',
@@ -552,3 +549,21 @@ def test_form_show_labels(self):
         html = render_crispy_form(form)
         self.assertEqual(html.count("<label"), 0)
 
+
+class TestBootstrap3FormHelper(TestFormHelper):
+    def test_label_class_and_field_class(self):
+        form = TestForm()
+        form.helper = FormHelper()
+        form.helper.label_class = 'col-lg-2'
+        form.helper.field_class = 'col-lg-8'
+        html = render_crispy_form(form)
+
+        self.assertTrue('<div class="form-group"> <div class="controls col-lg-offset-2 col-lg-8"> <div id="div_id_is_company" class="checkbox"> <label for="id_is_company" class=""> <input class="checkboxinput checkbox" id="id_is_company" name="is_company" type="checkbox" />')
+        self.assertEqual(html.count('col-lg-8'), 7)
+
+        form.helper.label_class = 'col-sm-3'
+        form.helper.field_class = 'col-sm-8'
+        html = render_crispy_form(form)
+
+        self.assertTrue('<div class="form-group"> <div class="controls col-sm-offset-3 col-sm-8"> <div id="div_id_is_company" class="checkbox"> <label for="id_is_company" class=""> <input class="checkboxinput checkbox" id="id_is_company" name="is_company" type="checkbox" />')
+        self.assertEqual(html.count('col-sm-8'), 7)