Question

I’m trying to customize Symfony2 form rendering to add a class to every select that is generated.
I thought that having a custom form_div_layout.html.twig with:

{% block choice_widget_collapsed %}
{% spaceless %}
    <select class='myclass' {{ block('widget_attributes') }}{% if multiple %} multiple="multiple"{% endif %}>
    {% if empty_value is not none %}
        <option value="">{{ empty_value|trans({}, translation_domain) }}</option>
    {% endif %}
    {% if preferred_choices|length > 0 %}
        {% set options = preferred_choices %}
        {{ block('choice_widget_options') }}
        {% if choices|length > 0 and separator is not none %}
            <option disabled="disabled">{{ separator }}</option>
        {% endif %}
    {% endif %}
    {% set options = choices %}
    {{ block('choice_widget_options') }}
</select>
{% endspaceless %}
{% endblock choice_widget_collapsed %}

and using it with

{% form_theme form 'YOPYourOwnPoetBundle:Form:form_div_layout.html.twig' %}

would do the trick.

However, the class ‘myclass’ isn’t added to the select.
What am I doing wrong?

Answer 1

You should first make sure the theme file you’re trying to use has the same name as the name you’re using in the form_theme expression and that the file really is there. I can’t remember off top of my head whether Twig throws an exception or not in case these do not match.

In addition, you might be accidentally passing a class attribute either when building a form or rendering it. What happens is that your element now has two class attributes.

A workaround is to actually add your new class to the collection of existing ones.

{% block choice_widget_collapsed %}
{% spaceless %}
{% set label_attr = label_attr|merge({class: label_attr.class|default('') ~ ' required'}) %}
    {% set attr = attr|merge({class: (attr.class|default('') ~ ' myclass')|trim}) %}
    <select {{ block('widget_attributes') }}{% if multiple %} multiple="multiple"{% endif %}>
    {# ... #}
</select>
{% endspaceless %}
{% endblock choice_widget_collapsed %}

This allows you to add any optional class you might need for specific elements later on.

EDIT

Looking at the Sf2 Github repsitory it seems that the theme file has been recently changed. In versions 2.0.* you should be overriding choice_widget, in versions 2.1.* the correct block is choice_widget_collapsed.