How to override the "form_div_layout" base template? - php

Question

I want to override the base tempale to be used in twig.
I have used this
twig:
form:
resources:
- 'form_div_layout.html.twig'
and I have copied the file from original location to
app/resources/views/Form/form_div_layout.html.twig but still I am not able to see the changes in template rendering.
Basically I just want to add the class in DIV box generated
{% block form_widget_compound %}
{% spaceless %}
<div class="MYCLASS"
{{ block('widget_container_attributes') }}>
{% if form.parent is empty %}
{{ form_errors(form) }}
{% endif %}
{{ block('form_rows') }}
{{ form_rest(form) }}
</div>
{% endspaceless %}
{% endblock form_widget_compound %}
Do I need to make any more change ?

Answer 1

You don´t need to copy the full file if you just want to customize one field. Do this:
If you just want to do this for just one template, add this to your template:
{% form_theme form _self %}
{% block form_widget_compound %}
{% spaceless %}
<div class="MYCLASS" >
{{ block('widget_container_attributes') }}>
{% if form.parent is empty %}
{{ form_errors(form) }}
{% endif %}
{{ block('form_rows') }}
{{ form_rest(form) }}
</div>
{% endspaceless %}
{% endblock form_widget_compound %}
If you want to customize this in several templates, do this: create a template file in your bundle with this code:
{# src/Acme/DemoBundle/Resources/views/Form/fields.html.twig #}
{% block form_widget_compound %}
{% spaceless %}
<div class="MYCLASS" >
{{ block('widget_container_attributes') }}>
{% if form.parent is empty %}
{{ form_errors(form) }}
{% endif %}
{{ block('form_rows') }}
{{ form_rest(form) }}
</div>
{% endspaceless %}
{% endblock form_widget_compound %}
Then in those templates where you want to use this customized field, do:
{% form_theme form 'AcmeDemoBundle:Form:fields.html.twig' %}
If you want this customization to be available in ALL templates of a bundle, add this to your config file:
# app/config/config.yml
twig:
form:
resources:
- 'AcmeDemoBundle:Form:fields.html.twig'
If you want this to be available for ALL bundles, copy this file to
app/Resources/AcmeDemoBundle/views/Form/fields.html.twig

Answer 2

To do what you are trying copy just form_div_layout.html.twig in resources without the Form folder and then in config reffer to it this way: ::form_div_layout.html.twig
twig:
form:
resources:
- '::form_div_layout.html.twig'
You don't have to copy all of it. You can extend only parts of it..

Answer 3

Here it is, plain and simple. To override only certain blocks application-wide you must use a different file name than form_div_layout.html.twig otherwise you will get errors. If you copy the entire file and make changes, this isn't a problem. But if you only want to override some of the blocks, this is how you do it:
Create the file app/Resources/views/forms.html.twig and paste in the blocks you want to customize. The filename isn't important as long as it is not form_div_layout.html.twig.
Next add this to the twig configuration in app/config/config.yml
# app/config/config.yml
twig:
form:
resources: ["::forms.html.twig"]

Answer 4

To make full global override of original form_div_layout.html.twig template but NOT copy entire file do next
Theory:
Add twig load path for original file (to avoid requrssion)
Optional. Add explicit form_themes
Place in your default path new 'form_div_layout.html.twig'
extend in the new file from the original by [path] namescpace
So. Practice
In your symfony twig config place it:
# symfony/config/packages/twig.yaml
twig:
default_path: '%kernel.project_dir%/templates'
# 1 step
paths:
- value: '%kernel.project_dir%/../vendor/symfony/twig-bridge/Resources/views/Form/'
namespace: 'TwigBridge'
form_themes:
- '#SonataForm/Form/datepicker.html.twig'
# 2nd
- 'form_div_layout.html.twig'
Create new file symfony dir/templates/form_div_layout.html.twig
# '%kernel.project_dir%/templates'
# OR
# templates/form_div_layout.html.twig*
{#{% extends 'vendor/symfony/twig-bridge/Resources/views/Form/form_div_layout.html.twig' %}#}
{% extends '#TwigBridge/form_div_layout.html.twig' %}
# make override - replace original form widget
{%- block dateinterval_widget -%}
{{ parent() }}
{%- endblock dateinterval_widget -%}
To make local overrides see other answers.