CODEWITHSUNDEEP
symfonysymfony-forms
famas23
famas23

Reputation: 2280

Symfony form theme conflict

I have two forms in the same template page, where I need to apply for each form one specific theme. Unfortunately the first theme override the second one. So that the second theme is not applied at all.


Another thing, in pages where I only have the form_subscribe form, the second theme is well applied for that form. The problems comes only when I have tow forms in the same page.

First Form:

{% form_theme form '@ezdesign/_form/bootstrap_full_form_theme.html.twig' %}
{{ form_start(form) }}
{{ form_end(form) }}

Second Form:

{% form_theme form_subscribe '@ezdesign/_form/bootstrap_modal_form_theme.html.twig' %}    
{{ form_start(form_subscribe) }}
{{ form_end(form_subscribe) }}

It's not necessary to share my template content, anyway: First theme templae:

{% extends 'bootstrap_4_layout.html.twig' %}
{% block form_row -%}
    {%- if compound is defined and compound -%}
        {%- set element = 'fieldset' -%}
    {%- endif -%}
    <{{ element|default('div') }} class="form-group">
    {{- form_widget(form) -}}
    </{{ element|default('div') }}>
{%- endblock form_row %}

Second Theme template:

 {% extends 'bootstrap_4_layout.html.twig' %}
    {% block form_row -%}
        {%- if compound is defined and compound -%}
            {%- set element = 'fieldset' -%}
        {%- endif -%}
        <{{ element|default('div') }} class="form-group">
        <div class="row">
            {{- form_label(form, null,  {'label_attr': {'class' : 'col-sm-4'}}) -}}
            <div class="col-sm-8">
                {{- form_widget(form) -}}
            </div>
        </div>
        </{{ element|default('div') }}>
    {%- endblock form_row %}

Any idea would be appreciated and voted.

Upvotes: 1

Views: 1016

Answers (2)

β.εηοιτ.βε
β.εηοιτ.βε

Reputation: 39284

As this could well be a side effect of the caching, and as it seems to be linked to the fact that the two forms are in the exact same template, a way to fix this could be to separate your forms with includes:

some-page.html.twig

{{ include('partial/form.html.twig', { 'form': form }) }}
{{ include('partial/form-subscribe.html.twig', { 'form_subscribe': form_subscribe }) }}

partial/form.html.twig

{% form_theme form '@ezdesign/_form/bootstrap_full_form_theme.html.twig' %}
{{ form_start(form) }}
{{ form_end(form) }}

partial/form-subscribe.html.twig

{% form_theme form_subscribe '@ezdesign/_form/bootstrap_modal_form_theme.html.twig' %}    
{{ form_start(form_subscribe) }}
{{ form_end(form_subscribe) }}

This way, you end up with only one form_theme per template, and wouldn't collide your themes as per this comment:

{# this form theme will be applied only to the form of this template #}

Source: https://symfony.com/doc/current/form/form_themes.html#applying-themes-to-single-forms

Upvotes: 1

acucchieri
acucchieri

Reputation: 582

Have your registred your custom form templates in twig config ?

# config/packages/twig.yaml (symfony 4) 
# app/config/config.yml (symfony < 4)
twig:
    form_themes:
        - ...
        - '@ezdesign/_form/bootstrap_full_form_theme.html.twig'
        - '@ezdesign/_form/bootstrap_modal_form_theme.html.twig'

https://symfony.com/doc/current/form/form_themes.html#applying-themes-to-all-forms

Upvotes: 1

Related Questions