web-dev-qa-db-ja.com

Symfony2-チェックボックス/ラジオのラベルと入力を同じ行に配置する方法

私のフォームにはいくつかのチェックボックスがありますが、デフォルトでは 私が持っています ：

  • 最初のラジオウィジェット
  • 最初のラベル
  • 2番目のラジオウィジェット
  • ラベル

SYmfony2によって生成されたHTMLコードは次のとおりです。

  <div>
    <input ...>
    <label ...></label>
    <input ...>
    <label ...></label>
  </div>

何 が欲しいです 持っていることです：

最初のラジオウィジェット最初のラベル
2番目のラジオウィジェット2番目のラベル

HTMLコードは次のようになります。

  <label .....><input ....></label>

Choice_widgetをオーバーライドする必要があると思いますが、入力とラベルを同じ行に配置する方法がわかりません

これは私がオーバーライドする必要があるかもしれないchoice_widgetです：

    {% block choice_widget %}
        {% spaceless %}
            {% if expanded %}
                <div {{ block('widget_container_attributes') }}>
                   {% for child in form %}
                      {{ form_widget(child) }}  {{ form_label(child) }}
                   {% endfor %}
                </div>
            {% else %}
                <select {{ block('widget_attributes') }}{% if multiple %} multiple="multiple"{% endif %}>
                {% if empty_value is not none %}
                     <option value="">{{ empty_value|trans }}</option>
                {% endif %}
                {% if preferred_choices|length > 0 %}
                    {% set options = preferred_choices %}
                    {{ block('widget_choice_options') }}
                        {% if choices|length > 0 and separator is not none %}
                            <option disabled="disabled">{{ separator }}</option>
                       {% endif %}
                {% endif %}
                {% set options = choices %}
                {{ block('widget_choice_options') }}
                </select>
           {% endif %}
      {% endspaceless %}
   {% endblock choice_widget %}
phpsymfonytwig
19
Reveclair

同じ問題があり、解決策を見つけることができなかったので、自分で解決しました。 _{% block choice_widget %}_ブロックをオーバーライドする必要があることは正しいです。最初のステップは、別のラベルを印刷する_{% if expanded %}_セクションから{{ form_label(child) }}行を削除することです。

_{% block choice_widget %}
{% spaceless %}
    {% if expanded %}
        <div {{ block('widget_container_attributes') }}>
        {% for child in form %}
            {{ form_widget(child) }}
        {#  {{ form_label(child) }} <--------------------- remove this line #}  
        {% endfor %}
        </div>
    {% else %}
    <select {{ block('widget_attributes') }}{% if multiple %} multiple="multiple"{% endif %}>
        {% if empty_value is not none %}
            <option value="">{{ empty_value|trans }}</option>
        {% endif %}
        {% if preferred_choices|length > 0 %}
            {% set options = preferred_choices %}
            {{ block('widget_choice_options') }}
            {% if choices|length > 0 and separator is not none %}
                <option disabled="disabled">{{ separator }}</option>
            {% endif %}
        {% endif %}
        {% set options = choices %}
        {{ block('widget_choice_options') }}
    </select>
    {% endif %}
{% endspaceless %}
{% endblock choice_widget %}
_

ここで、_{% block checkbox_widget %}_ブロックのラベルの印刷を処理する必要があります。

_{% block checkbox_widget %}
{% spaceless %}
    <label  for="{{ id }}"><input type="checkbox" {{ block('widget_attributes') }}{% if value is defined %} value="{{ value }}"{% endif %}{% if checked %} checked="checked"{% endif %} />{{ label|trans }}</label>
{% endspaceless %}
{% endblock checkbox_widget %}
_

_{% block radio_widget %}_についても同じようにする必要があります。そうしないと、現在はラベルがないためです。

_{% block radio_widget %}
{% spaceless %}
    <label  for="{{ id }}"><input type="radio" {{ block('widget_attributes') }}{% if value is defined %} value="{{ value }}"{% endif %}{% if checked %} checked="checked"{% endif %} />{{ label|trans }}</label>
{% endspaceless %}
{% endblock radio_widget %}
_
30
Bob F.

Alberto GaonaとJamesの助けを借りて、BS3ラジオとチェックボックスを統合するSymfony 2.4の正しいソリューションは次のとおりです。

あなたの見解では：

{% form_theme form 'AcmeDemoBundle:Form:fields.html.twig' %}

// A radio or checkbox input
{{ form_widget(form.example) }}

次に、fields.html.twig（これは https://github.com/symfony/symfony/blob/master/src/Symfony/Bridge/Twig/Resources/views/Form/form_div_layout.html.twigをオーバーライドします） ;参照 http://symfony.com/doc/current/cookbook/form/form_customization.html ）

{# src/Acme/DemoBundle/Resources/views/Form/fields.html.twig #}

{% block choice_widget_expanded %}
{% spaceless %}
    <div {{ block('widget_container_attributes') }}>
    {% for child in form %}
        {% if multiple %}
            <div class="checkbox">
        {% else %}
            <div class="radio">
        {% endif %}

        {{ form_widget(child) }}
        </div>
    {% endfor %}
    </div>
{% endspaceless %}
{% endblock choice_widget_expanded %}

{% block checkbox_widget %}
{% spaceless %}
{% if label is empty %}
    {% set label = name|humanize %}
{% endif %}
    <label  for="{{ id }}">
        <input type="checkbox" {{ block('widget_attributes') }}{% if value is defined %} value="{{ value }}"{% endif %}{% if checked %} checked="checked"{% endif %} />{{ label|trans({}, translation_domain) }}
    </label>
{% endspaceless %}
{% endblock checkbox_widget %}

{% block radio_widget %}
{% spaceless %}
{% if label is empty %}
    {% set label = name|humanize %}
{% endif %}
    <label  for="{{ id }}">
        <input type="radio" {{ block('widget_attributes') }}{% if value is defined %} value="{{ value }}"{% endif %}{% if checked %} checked="checked"{% endif %} />{{ label|trans({}, translation_domain) }}
    </label>
{% endspaceless %}
{% endblock radio_widget %}
13
Xavier13

注：Symfony 2.3の更新されたボブFソリューション（ https://github.com/symfony/symfony/blob/2.3/src/Symfony/Bridge/Twig/Resources/views/Form/form_div_layout.html.twigを参照） ）：

Choice_widget_expandedをオーバーライドします。

{% block choice_widget_expanded %}
{% spaceless %}
    <div {{ block('widget_container_attributes') }}>
    {% for child in form %}
        {{ form_widget(child) }}
    {% endfor %}
    </div>
{% endspaceless %}
{% endblock choice_widget_expanded %}

上書きチェックボックス（ブートストラップスタイル）：

{% block checkbox_widget %}
{% spaceless %}
    <label  for="{{ id }}" class="checkbox {% if checked %}checked{% endif %}" ><span class="icons"><span class="first-icon fui-checkbox-unchecked"></span><span class="second-icon fui-checkbox-checked"></span></span><input type="checkbox" {{ block('widget_attributes') }}{% if value is defined %} value="{{ value }}"{% endif %}{% if checked %} checked="checked"{% endif %} />{{ label|trans }}</label>
{% endspaceless %}
{% endblock checkbox_widget %}

ラジオボタンを上書き

{% block radio_widget %}
{% spaceless %}
    <label  for="{{ id }}"><input type="radio" {{ block('widget_attributes') }}{% if value is defined %} value="{{ value }}"{% endif %}{% if checked %} checked="checked"{% endif %} />{{ label|trans }}</label>
{% endspaceless %}
{% endblock radio_widget %}
11
Alberto Gaona

ラベルがレンダリングされると、for属性が含まれます-これにより、labelがinputにリンクされます- ここでlabelのドキュメントを参照してください） 出力を提案したものに変更することは、labelとinputをリンクするもう1つの方法です

ラベルを入力の左側に表示する場合は、テンプレートを次のように変更する必要があります。

{% for child in form %}
   <div>
      {{ form_label(child) }}  {{ form_widget(child) }} 
   </div>
{% endfor %}

labelの前にinputをレンダリングし、次の出力を作成します

<div>
  <div>
    <label ...></label>
    <input ...>
  </div>
  <div>
    <label ...></label>
    <input ...>
  </div>
</div>

次に、CSSスタイルを適用してインラインで表示することができます。

​div label {
    display: inline-block;
    width: 200px;
}​

デフォルトでは、CSSがない場合、labelはinputの前にこのHTMLレイアウトで整列しますが、inline-blockは、width属性を使用して、ラベルテキストの長さに関係なく、すべてのフィールドが正しく配置されるようにすることもできます。

ここでの作業例

2
ManseUK

フォーム入力をlabelタグ内に配置すると、HTMLが壊れます。

あなたの目標は何ですか？ラベルと入力をブラウザの同じ行に表示するだけの場合は、cssを使用できます。

input, label {
 display: inline;
}
1
MrGlass

Symfony 3以降では、radio-inlineクラスをlabel_attrを介してフォームに渡すだけです。

$builder->add('type', ChoiceType::class, [
    'expanded' => true, 
    'label_attr' => ['class' => 'radio-inline']
]);

カスタムウィジェットなどを作成する必要はありません...

ベンダーディレクトリ（src/Symfony/Bridge/Twig/Resources/views/Form/bootstrap_4_layout.html.twig）でSymfonyが提供するbootstrap_4_layout.html.twigを見て、これらのことを推測できます。

お役に立てれば。

0
Vincent Pazeller

Symfony 2.4では、これは期待どおりに機能しません。

{% block checkbox_widget %}
{% spaceless %}
  <label  for="{{ id }}"><input type="checkbox" {{ block('widget_attributes') }}{% if value is defined %} value="{{ value }}"{% endif %}{% if checked %} checked="checked"{% endif %} />{{ label|trans }}</label>
{% endspaceless %}
{% endblock checkbox_widget %}

...ラベルは使用できません。以下を追加する必要があります。

{% if label is empty %}
  {% set label = name|humanize %}
{% endif %}

したがって、完全なソリューションは次のとおりです。

{% block checkbox_widget %}
{% if label is empty %}
  {% set label = name|humanize %}
{% endif %}
{% spaceless %}
  <label  for="{{ id }}"><input type="checkbox" {{ block('widget_attributes') }}{% if value is defined %} value="{{ value }}"{% endif %}{% if checked %} checked="checked"{% endif %} />{{ label|trans }}</label>
{% endspaceless %}
{% endblock checkbox_widget %}
0
James

ラベルはかなり簡単なので、私は個人的にそれを手動でレンダリングすることを好みました。

あなたの小枝で素早く汚い：

<label for="field">
    {{ form_widget(form.field) }} Field Label
</label>

Symfonyがこれに対するより簡単な解決策を持っているなら、私はそれを望んでいたでしょう。

もちろん、上記の答えはおそらくよりエレガントで、そうではありません。 ;）

0
Yes Barry