symfony2 fosUserbundle input type with bootstrap

Question

I'm quite new to symfony2, i have managed to implement fosUserBundle and Braincrafted bootstrap bundle.

I am trying to style the registration form to use boot strap and the inputs with input-sm class

the username and email are displaying as input-sm but the 2 password fields refuse to resize to the class i have applied.

is there somewhere in the fosUserbundle where the password field widget is configured

{% trans_default_domain 'FOSUserBundle' %}

    {{ form_start(form, { 'style': 'horizontal', 'col_size': 'xs', 'label_col': 5, 'widget_col': 7, attr: {class: 'pull-left'}}) }}
    {{ form_row(form.username, { attr: {class: 'input-sm'}}) }}
    {{ form_row(form.email, { attr: {class: 'input-sm'}}) }}
    {{ form_row(form.plainPassword, { attr: {class: 'input-sm'}}) }}
    {{ form_row(form.plainPassword.second, { attr: {class: 'input-sm'}}) }}
    <div class="col-sm-5"></div>
    <div class="col-sm-7">
        <input class="btn-primary btn-sm" type="submit" value="{{ 'registration.submit'|trans }}" />
    </div>
    {{ form_rest(form) }}
    {{ form_end(form) }}

np87 np87 · Accepted Answer · 2014-07-23T13:55:15

FosUserBundle or not, you can overwrite Twig form rendering directly to achieve this, have a look at How to customize form rendering in SF cookbook.

Basically you can either get more precise in your template by splitting form_row into labels, widgets and errors to target the input ("form_widget" below) more specifically and apply the correct classes :

{{ form_errors(form.plainPassword) }}
{{ form_label(form.plainPassword) }}
{{ form_widget(form.plainPassword) }}

You can also generate your own form style for desired type of input by decalring it directly in your template :

{% form_theme form _self %}
{% block integer_widget %}
     <div class="integer_widget">
         // Your custom layout
     </div>
{% endblock %}

{% Block body %}
    // Rendering your form, your custom layout will be used.
{% endblock %}

You can also declare it in a separate template if you want to use it somewhere else, refer to the above cookbook page to see how.

symfony2 fosUserbundle input type with bootstrap

1 Answers