Symfony 2 - Customising Form Widget Display.

As you would expect with Symfony the layout and display for form widgets can be customised as needed.
I had a contact form with a radio buttons generated by this code:


$form = $this->createFormBuilder($contact)
->add('contactType', 'choice', array('label'=>'Select a Choice','expanded'=>true,'choices' => array('quote'=>'Request a Quote','support'=>'Technical Support','custservice'=>'Customer Service')))
->add('firstName', 'text', array('label'=>'first'))
->add('lastName', 'text', array('label'=>'last'))
->add('emailAddress', 'email', array('label'=>'Email'))
      ->add('phoneAreaCode', 'number', array('label'=>'###', 'max_length'=>3))
      ->add('phone1', 'number', array('label'=>'###', 'max_length'=>3))
      ->add('phone2', 'number', array('label'=>'####', 'max_length'=>4))
      ->add('message', 'textarea', array('required'=>false))
      ->getForm();

And rendered in a template:

<div class="TabbedPanelsContent">

  <div style="padding-left:40px; padding-right:150px; height:600px">

  <h2>Contact ACO</h2>

  <p>How can we help you?</p>

  <div class="ContactFormArea"> Select a Choice:

<form action="{{ path('acocusa_website_contactform') }}" method="post" {{ form_enctype(form) }}>

      <p>

    {{ form_widget(form.contactType) }}

      </p>

      <div class="ContactFields" style="width:580px; height:55px"> Name<br />

        <div class="ContactFieldElements">

          {{ form_widget(form.firstName) }}<!--<input name="FirstName" type="text" class="InputField" id="FirstName" size="22" />--><br /><label for="FirstName">First</label>

        </div>

        <div class="ContactFieldElements">

          {{ form_widget(form.lastName) }}<br /><label for="Surname">Surname</label>

        </div>

      </div>

   ....  

Which looks like this:

 However the designers wanted this:

In particular the Select a choice field needed to be displayed one option per line.

From the Symfony 2 cookbook - form_customization page I created a fragment to override the standard one. The originals are in vendor/symfony/symfony/src/Symfony/Bundle/FrameworkBundle/Resources/views/Form

For the choice widget there are:

choice_widget.html.php

choice_widget_collapsed.html.php

choice_widget_expanded.html.php

choice_options.html.php

choice_widget_options.html.php

However these are php code not twig templates, I needed the original twig template code to modify.

A search on stackoverflow.com provided the answer, I added this code to the template:

{% block choice_widget_expanded %}

{% spaceless %}

<div {{ block('widget_container_attributes') }}>

{% for child in form %}

    <label class="radio">

        {{ form_widget(child, {'attr': {'class': attr.widget_class|default('')}}) }}

        {{ child.vars.label|trans({}, translation_domain) }}<br>

    </label>

{% endfor %}

</div>

{% endspaceless %}

{% endblock %}

Adding the <br> tags.

The spaceless tag specifies twig to remove all white page between html tags.