add class atribute to symfony form builder row div

Question

here is my AbstractType code :

   $builder->add('email', 'email', array('label' => 'form.email', 'translation_domain' => 'FOSUserBundle'))

code above generated :

    <form class="fos_user_registration_register form-horizontal" role="form" method="POST" action="/app_dev.php/register/">

<div id="fos_user_registration_form">
 <div>
   <label class="required" for="fos_user_registration_form_email">Email: </label>
   <input id="fos_user_registration_form_email" type="email" required="required" name="fos_user_registration_form[email]">
 </div>
</div>

</form>
</div>

my question is how to add class attribute to the row div become :

<div class="form-group">
    <label class="required" for="fos_user_registration_form_email">Email: </label>
    <input id="fos_user_registration_form_email" type="email" required="required" name="fos_user_registration_form[email]">
</div>

Answer 1

Symfony2/Twig has a wonderful form rendering engine; it'd be a waste to completely override it. As a much more elegant alternative, we can take advantage of the built-in form themes. As per the documentation:

Symfony comes with four built-in form themes that define each and every fragment needed to render every part of a form

We can override the default theme and create our own. This allows us to override the form_row block, and add our own lovely attributes to the surrounding div. Simply put this in a file, say: views/forms/fields.twig.

{% block form_row %}

    <div class="form-group">
        {{ form_label(form) }}
        {{ form_errors(form) }}
        {{ form_widget(form) }}
    </div>

{% endblock %}

We don't need to worry about the other declarations, as Symfony will overload only what's changed.

We can now reference it from the page template. Replace form with the name of the form variable passed to the template:

{% form_theme form 'forms/fields.twig' %}

Of course, you're free to add a declaration to grab a form attribute instead of hard-coding the class name.

(Source: http://symfony.com/doc/2.7/cookbook/form/form_customization.html)

Answer 2

for me the answer of skler is not a solution, because it add the class to the input email, not to the div.

edit:

A better solution

{% for child in form.children|keys %}
    <div class="login_field">
        {% if 'token' not in form_label(attribute(form.children,child)) %}
            {{form_label(attribute(form.children,child)) }}
        {% endif %}
        {{form_widget(attribute(form.children,child)) }}
    </div>
    <br/>
{% endfor %}

result in:

<div class="registration_field">
    <label>e-mail</label>
    <input type="email">
</div>

it remove unused div and the token label, and we can use .registration_field selector instead of .registration_field > div

for Amstell: i answer to the solution of skler, saying that for me it's not a solution, Sorry, it's not clear.

Answer 3

Add into your app/config/config.yml following lines:

twig:
    form:
       resources: ['bootstrap_3_layout.html.twig']

or

twig:
    form_themes:
        - "bootstrap_3_layout.html.twig"

http://symfony.com/blog/new-in-symfony-2-6-bootstrap-form-theme

Answer 4

This question is very similar to this other except for the fact that you should use:

{{ form_start(form), {'attr': {'class': 'form-group'}} }}

Another solution is to define it in Form\Type class:

$builder->add('email', 'email', array(
        'label' => 'form.email',
        'translation_domain' => 'FOSUserBundle',
        'attr' => array('class' => 'form-group'),
        'label_attr' => array('class' => 'if-you-want-also-style-attr-label'),
    ));