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 %}
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.
Si te a gustado y lo encuentras util, no dudes en compartir este truco en las redes sociales.
Hasta la proxima Sf dev¡¡