Search This Blog

Monday, March 11, 2013

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.





No comments:

Post a Comment