Symfony2: background color of date widget

Question

For a template that includes a date field widget, non-date input fields will have their background colors changed per CSS. The same does not occur on the date widget. How should the background color of the date widget be effected? (Adding an attr array in the form class has no effect.)

A screenshot of the (small but real) difference:

Code samples: Template:

    <td>{{ form_widget(form.fname, {'attr': {'class':'smallform'}}) }}
    <td>{{ form_widget(form.sname, {'attr': {'class':'smallform'}}) }}
    <td>{{ form_widget(form.dateAdded, {'attr': {'class':'smallform'} }) }}

Form class:

        ->add('fname', null, array('required' => false))
        ->add('sname', null, array('required' => false))
        ->add('dateAdded', 'date', array(
            'widget' => 'choice',
            'format' => 'MM/dd/yyyy',
            'pattern' => '{{ year }}-{{ month }}-{{ day }}',
            'years' => range(Date('Y'), Date('Y') - 5),
            'required' => false,
            'data' => date_create(),
        ))

CSS:

.smallform {
    background-color: #f5f5f5;
    font-size: 9pt;
    color: #000066;
    border: 1px solid #CCCC99;
}

Answer 1

Try:

    ->add('fname', null, array(
        'required' => false,
        'attr' => array('class' => 'smallform')
    ))
    ->add('sname', null, array(
        'required' => false,
        'attr' => array('class' => 'smallform')
    ))
    ->add('dateAdded', 'date', array(
        'attr' => array('class' => 'smallform'), // ADDED
        'widget' => 'choice',
        'format' => 'MM/dd/yyyy',
        'pattern' => '{{ year }}-{{ month }}-{{ day }}',
        'years' => range(Date('Y'), Date('Y') - 5),
        'required' => false,
        'data' => date_create(),
    ))

also, view-source to make sure the classes are actually set in the html tags, it could be a problem with your CSS.

There is a problem with these lines:
<td>{{ form_widget(form.fname, {'attr': {'class':'smallform'}}) }}</td>
I dont think you can set a class on the entire widget, only for individual rows. you can try this if you need to set the class via twig.

<form action="" method="">
    {{ form_errors(form) }}
    {{ form_row(form.fname, { 'attr': {'class': 'smallform' } }) }}
    {{ form_row(form.sname, { 'attr': { 'class': 'smallform' } }) }}
    <div class="smallform">
        {{ form_row(form.dateAdded) }}
    </div>
    {{ form_rest(form) }}
    <input type="submit" name="submit" value="Submit" />
</form>

Answer 2

A less-than-subtle solution: modify the date widget in my application's customized copy of fields.html.twig. The more precise solution would be to define a specific widget for this, or figure out how to retain the class attribute all the way into the date widget:

{% block date_widget %}
{% spaceless %}
    {% if widget == 'single_text' %}
        {{ block('form_widget_simple') }}
    {% else %}
        <div {{ block('widget_container_attributes') }}>
            {{ date_pattern|replace({
                '{{ year }}': form_widget(form.year, {'attr': {'class':'smallform'}}),
                '{{ month }}': form_widget(form.month, {'attr': {'class':'smallform'}}),
                '{{ day }}': form_widget(form.day, {'attr': {'class':'smallform'}}),
            })|raw }}
        </div>
    {% endif %}
{% endspaceless %}
{% endblock date_widget %}