0

Lo que necesito es aplicarle formato (un tema de bootstrap) a un formulario que me generó symfony luego de crear un CRUD a una entidad. He estado investigando al respecto y según la documentación existen dos vías para realizar lo anterior.
He intentado la vía a partir de una plantilla externa y he creado la clase: app/Resources/views/form/fields.html.twig
Como dice la documentación pero el problema está en qué pongo dentro de esa clase para aplicarle el estilo al formulario y a sus campos.

Este es mi código dentro de la clase twig del formulario:

{% extends 'base.html.twig' %}
{% form_theme form 'form/fields.html.twig' %}

{% block body %}
    <h1>Create a Team!</h1>

{{ form_start(form) }}

<div> 
    {{ form_row(form.abbr) }}
    {{ form_errors(form.abbr) }}
    {{ form_widget(form.abbr) }}
</div>
<div>
    {{ form_row(form.name) }}
    {{ form_errors(form.name) }}
    {{ form_widget(form.name) }}
</div>
<div>
    {{ form_row(form.league) }}
    {{ form_errors(form.league) }}
    {{ form_widget(form.league) }}
</div>
<div>
    {{ form_row(form.division) }}
    {{ form_errors(form.division) }}
    {{ form_widget(form.division    ) }}
</div>

<div class="col-sm-offset-2 col-sm-10">
<input type="submit" value="Create" />
</div>
{{ form_end(form) }}

<ul>
    <a href="{{ path('team_index') }}">Back to the teams list</a>
</ul>
{% endblock %}
2
  • Symfony trae predefinida par de plantillas para formularios. Agrega {% form_theme form 'bootstrap_3_horizontal_layout.html.twig' %} y cargará un thema. también está bootstrap_3_vertical. Saludos Commented el 10 may. 2018 a las 15:25
  • Eso me ha funcionado. Gracias! Pero me queda la duda de que poner en esa clase externa para una mayor personalización de los campos de mi formulario. Me gustaría saber como hacerlo de esa manera.
    – warner
    Commented el 10 may. 2018 a las 15:40

1 respuesta 1

0

Lo que haces en esa plantilla externa, form/fields.html.twig, es reescribir las plantillas por defecto que trae Symfony. En Symfony 4 se encuentran en:

vendor/symfony/twig-bridge/Resources/views/Form

Por ejemplo, form_div_layout.html.twig se encarga de los divs del formulario.

En form/fields.html.twig reescribes los bloques que te interesen modificar. Te hago un copy/paste de los bloques checkbox_widget y date_widget que tengo en una de esas plantillas externas. Fíjate que tengo metidas clases Bootstrap en el diseño:

{%- block checkbox_widget -%}

{% set emailmult1a00 = app.session.get('emailmult1a00') %}
{% set w = app.session.get('w') %}
{% set flotante = app.session.get('flotante') %}
    <a style="cursor: pointer;">
      <img class="mr-3" onclick="check('{{ emailmult1a00 }}'); mostrardiv('{{ flotante }}'); mostrarformulario();" src="{{ asset( 'email.gif', 'imgnuevas' ) }}" border="0" alt="Email" hspace="4px" vspace="0" align="middle" style="float: center; border: 0;" />
    </a>
<input onclick="mostrardiv('{{ flotante }}'); mostrarformulario();" type="checkbox" id="{{ emailmult1a00 }}" name="{{ emailmult1a00 }}" value="{{ w }}" />
{%- endblock checkbox_widget -%}

{%- block date_widget -%}
    {%- if widget == 'single_text' -%}
            {% set attr = attr|merge({'class': (attr.class|default('campofecha'))|trim, 'size': (attr.size|default(10) ~ ' required')|trim}) %}

        {{ block('form_widget_simple') }}
    {%- else -%}
            {{- date_pattern|replace({
                '{{ day }}':   form_widget(form.day),
                '{{ month }}': form_widget(form.month),
                '{{ year }}':  form_widget(form.year),
            })|raw -}}
    {%- endif -%}
{%- endblock date_widget -%}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.