0

When using a input-group-addon, when there's an error, the span element of the error is wrapped by the input-group-addon:

enter image description here

the html:

<div class="controls col-md-6 input-group"> 

<input name="name" value="English" class="lang_name dropdown-toggle dropdowntogglewidget form-control form-control-danger" maxlength="40" required="" id="id_name" type="text"> 
<span role="button" class=" input-group-addon dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span></span> 
<span id="error_1_id_name" class="help-block"><strong>Languages with this Name already exists.</strong></span>
 </div>

my forms.py:

class LanguagesForm(forms.ModelForm):
...

  def __init__(self, *args, **kwargs):
        super(LanguagesForm, self).__init__(*args,**kwargs)

        self.helper = FormHelper()
        self.helper.form_class = 'form-horizontal text_detail'
        self.helper.label_class = 'col-md-3'
        self.helper.field_class = 'col-md-6 input-group'
 ...

I guess it's the same problem than Bootstrap 3 form using input-group-addon wrapping error labels with Jquery Validate but here, we have less option...

A "solution", hackish as hell:

Overriding the templates/bootstrap3/field.html

in forms.py:

    def __init__(self, *args, **kwargs):
        ...
        self.helper.field_template = 'custom_bootstrap_field.html'

Put inside myproject/templates a custom_bootstrap_field.html file, with inside, modifying:

    {% if not field|is_checkboxselectmultiple and not field|is_radioselect %}
        {% if field|is_checkbox and form_show_labels %}
            <label for="{{ field.id_for_label }}" class="{% if field.field.required %} requiredField{% endif %}">
                {% crispy_field field %}
                {{ field.label|safe }}{% if field.field.required %}<span class="asteriskField">*</span>{% endif %}
            </label>
            {% include 'bootstrap3/layout/help_text_and_errors.html' %}
        {% else %}
            <!-- I CHANGED THIS -->
            <div class="controls {{ field_class }}">
                {% crispy_field field %}
                {% include 'bootstrap3/layout/help_text_and_errors.html' %}
            </div>
            <!-- -->

        {% endif %}

by:

    {% if not field|is_checkboxselectmultiple and not field|is_radioselect %}
        {% if field|is_checkbox and form_show_labels %}
            <label for="{{ field.id_for_label }}" class="{% if field.field.required %} requiredField{% endif %}">
                {% crispy_field field %}
                {{ field.label|safe }}{% if field.field.required %}<span class="asteriskField">*</span>{% endif %}
            </label>
            {% include 'bootstrap3/layout/help_text_and_errors.html' %}
        {% else %}
            <!-- BY THIS --> 
            <div class="controls {{ field_class }}">
                {% crispy_field field %}
            </div>
            <p class="col-md-offset-3">
                {% include 'bootstrap3/layout/help_text_and_errors.html' %}
            </p>
          <!-- -->
        {% endif %}

The offset is hardcoded now... but at least it's working.

ThePhi
  • 2,373
  • 3
  • 28
  • 38
  • you can use the HTML in crispy form with `HTML('
    ')` and format the form . if you wish I can show you whole form. but that would be no answer, just an example for your reference.     – Kalariya_M Nov 08 '17 at 08:46
  • Override the crispy form template for this type of input. Compare your html output to the bootstrap html as shown in de bootstrap documentation. Any difference you want to fix in your template override. Same for css, lookup all the applied css in your browsers development tools and compare it to the plain bootstrap css. Fix all differences. It is called debugging. – allcaps Nov 08 '17 at 08:47
  • use Django form widgets tweaks. Just add the classes you need and forget the crispy forms..... – hansTheFranz Nov 08 '17 at 10:38

0 Answers0