django-autocomplete-light incompatible with django-material

[darahsten]

I would to configure dal to work in a form using autocomplete light. After almost a day of debugging I came to the conclusion by using stripping everything bare to realize that django material for whatever reason obscures and disables dal.

when a form is rendered normally as
{{form }}
the autocomplete light renders properly.
But when form is rendered the django-material way
{% form form=form %}{% endform %}
dal doesn't render its widget form as expected.

[jpic]

Great question ! DM overrides Django's form rendering mechanisms to achieve material design (yes, Django's current Forms OOP design prevents implementing material, where widget must be aware of the label to render itself and this kind of things, pretty sad aint it ? in my django crud i'm migrating away from forms in favor of something else ie. wtforms).

You should probably try this one for use with DM: http://materializecss.com/forms.html
If you make it please share your code ;)

[melvyn-sopacua]

I've made this work before. Create a template file templates/material/fields/dal_select2_modelselect2.html. The naming convention is important.

Contents (which is a slightly modified version of material's select template):

    {% load l10n material_form material_form_internal %}
    {% part bound_field.field %}
    <div class="row">
            <div{% attrs bound_field 'group' %}
                    id="id_{{ bound_field.html_name }}_container"
                    class="autocomplete-field select2 col s12{% if field.required %} required{% endif %}{% if bound_field.errors %} has-error{% endif %}"
            {% endattrs %}>
                    {% part field prefix %}{% endpart %}{% part field label %}
                            <label{% attrs bound_field 'label' %}
                                    for="{{ bound_field.id_for_label }}"
                            {% endattrs %}>{{ bound_field.label }}</label>
                    {% endpart %}
                    {% part field control %}
                            <div class="section">
                                    {{ bound_field }}
                            </div>
                    {% endpart %}
                    {% part field help_text %}{% if field.help_text %}
                            <div class="help-block">{{ bound_field.help_text|safe }}</div>
                    {% endif %}{% endpart %}{% part field errors %}
                            {% if bound_field.errors %}
                                    {% include  'material/field_errors.html' %}
                            {% endif %}{% endpart %}{{ hidden_initial }}
            </div>
    </div>{% endpart %}

[jpic]

Should this be contributed to dal perhaps or is it better here as an example ?

[melvyn-sopacua]

I think crudfla+ should implement it if you stick to django-material and maybe then link it from the docs?

The approach taken for rendering forms is interesting in general. Both the template tags and the Layout class. It was trivial to implement for instance a Tab class that could group several elements and render as material tabs.

[jpic]

Absolutely the form rendering for django-material is really great, I think it should be merged in django really, otherwise we'll have to implement an override for every new widget

[melvyn-sopacua]

No, we don't. The chosen widget template tries most specific to least. It's just that selects are handled in JS.

[CoutinhoElias]

Good night,
I found your solution fantastic, implemented here but there were still some issues with jquery.
I would like to know if you have a small project with foreingkey and that can make it available to everyone here.