Symfony 2 - Form theming - Overriden block renders two times

Question

I'm trying to customize a theme form submit button but this button is being rendered two times. The first time when the block is overriden and the second time when i'm using it in my form.

Here is the code and the result.

Thanks a lot.

{# src/YagoQuinoy/Simple/BlogBundle/Resources/views/Blog/searchArtciles.html.twig #}

{% form_theme form _self %}

{% block submit_widget %}
    <button><i class="fa fa-bicycle"></i></button>
{% endblock submit_widget %}

{{ form_start(form, {'attr': {'novalidate': 'novalidate'}}) }}
{{ form_errors(form.search) }}
{{ form_widget(form.search) }}
{{ form_widget(form.submit, {'attr': {'class': 'e-search-articles-submit'}}) }}
{{ form_end(form) }}

Link to the image (don't have 10 reputation ¬¬) Double rendered button image

Because you are not extending a parent template all of the blocks are rendered as is. This means that your `{% block submit_widget %}...{% endblock submit_widget %}` is being rendered, then your form with the themed version from your `submit_widget` block. — qooplmao, Dec 31 '14 at 13:13
This code comes from an embedded controller. http://symfony.com/doc/current/book/templating.html#embedding-controllers What can i do in this scenario? I've run out of ideas. I think i'm going to not theming this submit button but that's sad. — YagoQuinoy, Jan 01 '15 at 10:51

score 1 · Answer 1 · answered Jan 01 '15 at 17:41

1

Solved using separated template file like is suggested in documentation.

http://symfony.com/doc/current/cookbook/form/form_customization.html#method-2-inside-a-separate-template

answered Jan 01 '15 at 17:41

YagoQuinoy

133
1
11

Yes, some issue here, some solution. Question: why so? which is the difference? – mario Aug 14 '15 at 14:08

score 0 · Answer 2 · answered Dec 31 '14 at 12:42

If you look at the https://github.com/symfony/symfony/blob/master/src/Symfony/Bridge/Twig/Resources/views/Form/form_div_layout.html.twig, then you can see, that {% block submit_widget %} doesn't contain button element.

submit_widget looks like:

{% block submit_widget -%}
    {% set type = type|default('submit') %}
    {{- block('button_widget') -}}
{%- endblock submit_widget %}

And this block contains button_widget:

{% block button_widget -%}
    {% if label is empty -%}
        {%- if label_format is not empty -%}
            {% set label = label_format|replace({
                '%name%': name,
                '%id%': id,
            }) %}
        {%- else -%}
            {% set label = name|humanize %}
        {%- endif -%}
    {%- endif -%}
    <button type="{{ type|default('button') }}" {{ block('button_attributes') }}>{{ label|trans({}, translation_domain) }}</button>
{%- endblock button_widget %}

You must change button_widget (and add class fa fa-bicycle) if you want to add font awesome icon - like:

{% block button_widget -%}
    {% if label is empty -%}
        {%- if label_format is not empty -%}
            {% set label = label_format|replace({
                '%name%': name,
                '%id%': id,
            }) %}
        {%- else -%}
            {% set label = name|humanize %}
        {%- endif -%}
    {%- endif -%}
    <button type="{{ type|default('button') }}" {{ block('button_attributes') }}><i class="fa fa-bicycle"></i>{{ label|trans({}, translation_domain) }}</button>
{%- endblock button_widget %}

Symfony 2 - Form theming - Overriden block renders two times

2 Answers2

Linked