Formularios: Sobrescribir template de un widget – Personalización – Symfony

En esta ocasión os voy a hablar sobre como sobrescribir un form_widget de los que se usa en los formularios para personalizarlo a nuestro gusto.

En mi caso, tengo configurado para que Symfony coja las plantillas definidas en sus Form Themes,las cuales meten elementos HTML definidos para que se ajusten a un estilo concreto.

Eso se puede configurar en el app/config/config.yml:

twig:
   //...
    form_themes:
        - 'bootstrap_3_layout.html.twig'

Aqui podemos elegir entre varios form_themes que Symfony trae pre-definidos:

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

form_div_layout.html.twig, wraps each form field inside a element.

form_table_layout.html.twig, wraps the entire form inside a element and each form field inside a element.

bootstrap_3_layout.html.twig, wraps each form field inside a element with the appropriate CSS classes to apply the default Bootstrap 3 CSS framework styles.

bootstrap_3_horizontal_layout.html.twig, it’s similar to the previous theme, but the CSS classes applied are the ones used to display the forms horizontally (i.e. the label and the widget in the same row).

foundation_5_layout.html.twig, wraps each form field inside a element with the appropriate CSS classes to apply the default Foundation CSS framework styles.

En mi aplicacion me ocurre que esto me inserta una etiqueta ‘div class=form-control’ al insertar un elemento de mi FormType y justamente necesito que ese “div” no exista para que se alinee todo horizontalmente, sino la clase form-control me coge todo el ancho y no permite elementos contiguos.

Para ello, no me queda mas remedio que buscar el form_theme y en concreto el widget que “pinta” ese div y “sobrescribirlo”.

vendor/symfony/symfony/src/Symfony/Bridge/Twig/Resources/views/Form/bootstrap_3_layout.html.twig

{% block form_row -%}
    {{- form_label(form) -}} 
    {{- form_widget(form) -}} 
    {{- form_errors(form) -}}
{%- endblock form_row %}

Ese es el bloque que mete el div que necesito quitar. Justamente el widget que pinta un row del formulario.

1- Creamos un template Twig en nuestro proyecto y lo llamamos ‘formRowCustom.html.twig’ y en el metemos lo siguiente:

{% block form_row -%}
        {{- form_label(form) -}}
        {{- form_widget(form) -}}
        {{- form_errors(form) -}}
{%- endblock form_row %}

2- A continuacion para poder usar nuestro “widget theme”, nos vamos al formulario donde lo queremos y lo usaremos asi:

{% form_theme form.user 'AppBundle:Form:formRowCustom.html.twig' %}
{{ form_widget(form.user) }}

De esta forma, cuando se vaya a ejecutar la funcion de Twig llamada “form_widget()”, en lugar de “pintar” el estilo del Form Theme, nos mostrara nuestro estilo personalizado.

Con este “trick” podemos personalizar todos los elementos de los formularios para que se ajusten a nuestro diseño.

Para más información os dejo el enlace de la documentación oficial para que veais mas ejemplos o formas de sobrescribir los elementos de los form themes.