Add classes and attributes to all multiple selects in Symfony2?

I want to customize all multiple selects of my application like that :

<select class="selectpicker show-tick" data-size="auto">
...
</select>

How should I do that?

EDIT for ncrocfer

This is my build form method: This is not complete, lack some stuff...

public function buildForm(FormBuilderInterface $builder, array $options)
{
    $builder
        ->add('title')
        ->add('misc')
        ->add('url')
        ->add('attachment', 'file')
        ->add('time_estimated')
        ->add('started_at')
        ->add('finished_at')
        ->add('default')
        ->add('deadline')
        ->add('priority', 'entity', array(
            'class'    => 'LanCrmBundle:TaskPriority',
            'property' => 'title',
            'multiple' => false
        ))
        ->add('project', 'entity', array(
            'class'    => 'LanCrmBundle:Project',
            'property' => 'title',
            'multiple' => false
        ))
        ->add('category', 'entity', array(
            'class'    => 'LanCrmBundle:TaskCategory',
            'property' => 'title',
            'multiple' => false
        ))
        ->add('user', 'entity', array(
            'class'    => 'LanSecurityBundle:User',
            'property' => 'username',
            'multiple' => false
        ))
        ->add('products', 'entity', array(
            'class'    => 'LanCrmBundle:Product',
            'property' => 'title',
            'multiple' => true
        ))
    ;
}

Answers


Use the attr attribute in your form buider :

<?php

namespace Foo\BarBundle\Form;

use Symfony\Component\Form\AbstractType;
use Symfony\Component\Form\FormBuilderInterface;
use Symfony\Component\OptionsResolver\OptionsResolverInterface;

class FooType extends AbstractType
{

    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder
            ->add('foo', 'choice', array(
                'choices' => array(0 => 'Option 1', 1 => 'Option 2'),
                'attr' => array('class' => 'selectpicker show-tick', 'data-size' => 'auto'),
            ))
        ;
    }
}

Edit

If you have a lot of forms like you said in your comment, you can use the form customization.

Create a new template file :

{# src/Foo/BarBundle/Resources/views/Form/fields.html.twig #}
{% block choice_widget_collapsed %}
{% spaceless %}
    <select {{ block('widget_attributes') }}{% if multiple %} multiple="multiple"{% endif %} class="selectpicker show-tick" data-size="auto">
        {% 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 %}

Then import your template inside your application configuration :

# app/config/config.yml
twig:
    form:
        resources:
            - 'FooBarBundle:Form:fields.html.twig'

The change will be effective on all your select.


Use attr attribute in FormBuilder:

'attr' => array('class'=>'selectpicker show-tick', 'data-size'=>'auto')

Need Your Help

How do you handle busy icons in an AJAX site?

javascript jquery ajax concurrency callback

This question deals with concurrency issues, for suggestions on how to display a busy icon see this question: Javascript - loading/busy indicator or transparent div over page on event click