Symfony2 - 如何将复选框/无线电的标签和输入放在同一行中？

php symfony twig

2022-08-30 20:22:09

在我的表单中，我有一些复选框，但默认情况下，我有：

第一个无线电小部件
第一个标签
第二个无线电小部件
标签

以下是SYmfony2生成的html代码：

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

我想要的是：

第一个无线电小部件第一个标签
第二个无线电小部件第二个标签

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 %}

答案 1

我遇到了同样的问题，我无法找到解决方案，所以我自己解决了这个问题。您是对的，您确实需要覆盖该块。第一步是从打印出单独标签的部分中删除该行。{% block choice_widget %}{{ form_label(child) }}{% if expanded %}

{% 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 %}

答案 2

在Alberto Gaona和James的帮助下，Symfony 2.4集成BS3无线电和复选框的正确解决方案如下：

在您看来，您有：

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

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

然后在你的字段中.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 %}