1

日付フィールドウィジェットを含むテンプレートの場合、日付以外の入力フィールドでは、CSSごとに背景色が変更されます。同じことは日付ウィジェットでは発生しません。日付ウィジェットの背景色はどのように影響を受ける必要がありますか？（フォームクラスにattr配列を追加しても効果はありません。）

（小さいが実際の）違いのスクリーンショット：ここに画像の説明を入力してください

コードサンプル：テンプレート：

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

フォームクラス：

        ->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;
}
4

2 に答える 2

2

微妙ではない解決策：アプリケーションのカスタマイズされたfields.html.twigのコピーで日付ウィジェットを変更します。より正確な解決策は、このための特定のウィジェットを定義するか、クラス属性を日付ウィジェットに完全に保持する方法を理解することです。

{% 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 %}
于 2012-12-17T17:57:25.610 に答える
0

試す： 

    ->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(),
    ))

また、クラスが実際にhtmlタグに設定されていることを確認するために、ソースを表示します。これは、CSSに問題がある可能性があります。

これらの行には問題があり
<td>{{ form_widget(form.fname, {'attr': {'class':'smallform'}}) }}</td>
ます。ウィジェット全体にクラスを設定できるとは思いませんが、個々の行にのみ設定できます。小枝を介してクラスを設定する必要がある場合は、これを試すことができます。 

<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>
于 2012-12-16T18:06:03.230 に答える