Skip to content

Add field override for bottom margin when field wrapper_class string contains variations on 'mb-' or 'my-' or 'm-' - #219

Open
nordmichael wants to merge 1 commit into
django-crispy-forms:mainfrom
nordmichael:feat--allow-override-of-mb-3-on-field-template
Open

Add field override for bottom margin when field wrapper_class string contains variations on 'mb-' or 'my-' or 'm-'#219
nordmichael wants to merge 1 commit into
django-crispy-forms:mainfrom
nordmichael:feat--allow-override-of-mb-3-on-field-template

Conversation

@nordmichael

Copy link
Copy Markdown

Existing field template does not provide any mechanism for overriding bottom margin, leading to all form fields having a bottom margin of mb-3 even if a wrapper_class is specified that should replace mb-3

… bottom margin, leading to all form fields having a bottom margin of mb-3 even if a wrapper_class is specified that should replace mb-3
@nordmichael

Copy link
Copy Markdown
Author

#218

@smithdc1 smithdc1 left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the patch.

I have spotted one regression that we should fix and then have a couple of suggestions.

We should also document this as it's likely to be a breaking change for some users. I'd add a release note.

<div class="{% for offset in bootstrap_checkbox_offsets %}{{ offset|slice:"7:14" }}{{ offset|slice:"4:7" }}{{ offset|slice:"14:16" }} {% endfor %}{{ field_class }}">
{% endif %}
{% endif %}
<{% if tag %}{{ tag }}{% else %}div{% endif %} id="div_{{ field.auto_id }}" class="{% if field|is_checkbox and form_show_labels %}form-check{% else %}mb-3{% if 'form-horizontal' in form_class %} row{% endif %}{% endif %}{% if wrapper_class %} {{ wrapper_class }}{% endif %}{% if field.css_classes %} {{ field.css_classes }}{% endif %}">

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This space that got removed is important.

If a layout were:

    test_form.helper.layout = Layout(
        Field('fruit', wrapper_class="custom-class")
    )

We now get:

<div id="div_id_fruit" class="mb-3custom-class">

It seems we don't have a test for this, we should add one.

{% endif %}
{% endif %}
<{% if tag %}{{ tag }}{% else %}div{% endif %} id="div_{{ field.auto_id }}" class="{% if field|is_checkbox and form_show_labels %}form-check{% else %}mb-3{% if 'form-horizontal' in form_class %} row{% endif %}{% endif %}{% if wrapper_class %} {{ wrapper_class }}{% endif %}{% if field.css_classes %} {{ field.css_classes }}{% endif %}">
<{% if tag %}{{ tag }}{% else %}div{% endif %} id="div_{{ field.auto_id }}" class="{% if field|is_checkbox and form_show_labels %}form-check{% else %}{% if wrapper_class and ' mb-' in ' '|add:wrapper_class or wrapper_class and ' my-' in ' '|add:wrapper_class or wrapper_class and ' m-' in ' '|add:wrapper_class %}{% else %}mb-3{% endif %}{% if 'form-horizontal' in form_class %} row{% endif %}{% endif %}{% if wrapper_class %}{{ wrapper_class }}{% endif %}{% if field.css_classes %} {{ field.css_classes }}{% endif %}">

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We could use with to avoid many string concatenations.

Suggested change
<{% if tag %}{{ tag }}{% else %}div{% endif %} id="div_{{ field.auto_id }}" class="{% if field|is_checkbox and form_show_labels %}form-check{% else %}{% if wrapper_class and ' mb-' in ' '|add:wrapper_class or wrapper_class and ' my-' in ' '|add:wrapper_class or wrapper_class and ' m-' in ' '|add:wrapper_class %}{% else %}mb-3{% endif %}{% if 'form-horizontal' in form_class %} row{% endif %}{% endif %}{% if wrapper_class %}{{ wrapper_class }}{% endif %}{% if field.css_classes %} {{ field.css_classes }}{% endif %}">
<{% if tag %}{{ tag }}{% else %}div{% endif %} id="div_{{ field.auto_id }}" class="{% if field|is_checkbox and form_show_labels %}form-check{% else %}{% if wrapper_class %}{% with wc=' '|add:wrapper_class %}{% if ' mb-' in wc or ' my-' in wc or ' m-' in wc %}{% else %}mb-3{% endif %}{% endwith %}{% else %}mb-3{% endif %}{% if 'form-horizontal' in form_class %} row{% endif %}{% endif %}{% if wrapper_class %} {{ wrapper_class }}{% endif %}{% if field.css_classes %} {{ field.css_classes }}{% endif %}">

test_form.helper = FormHelper()
test_form.helper.layout = Layout(
Field('fruit', wrapper_class="mb-0")
)

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Add tests for the other options too?

Suggested change
)
Field('fruit', wrapper_class="custom-class"),
Field('fruit', wrapper_class="m-4"),
Field('fruit', wrapper_class="my-4"),
Field('fruit', wrapper_class="my-4 custom-class"),
)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants