Symfony2 - Wie fügt man Label und Eingabefeld für Kontrollkästchen/Radiobuttons in einer Zeile hinzu?

Question

In meinem Formular habe ich einige Kontrollkästchen, aber standardmäßig habe ich:

• das erste Optionsfeld
• das erste Etikett
• das zweite Optionsfeld
• das Etikett

Hier ist der HTML-Code, der von Symfony2 generiert wurde:

Was ich möchte ist:

das erste Optionsfeld das erste Etikett
das zweite Optionsfeld das zweite Etikett

Der HTML-Code wäre:

Ich denke, ich muss den choice_widget überschreiben, weiß aber nicht, wie ich input und label in die gleiche Zeile einfügen soll.

Hier ist der choice_widget, den ich überschreiben muss:

    {% block choice_widget %}
        {% spaceless %}
            {% if expanded %}

                   {% for child in form %}
                      {{ form_widget(child) }}  {{ form_label(child) }}
                   {% endfor %}

            {% else %}

                {% if empty_value is not none %}
                     {{ empty_value|trans }}
                {% endif %}
                {% if preferred_choices|length > 0 %}
                    {% set options = preferred_choices %}
                    {{ block('widget_choice_options') }}
                        {% if choices|length > 0 and separator is not none %}
                            {{ separator }}
                       {% endif %}
                {% endif %}
                {% set options = choices %}
                {{ block('widget_choice_options') }}

           {% endif %}
      {% endspaceless %}
   {% endblock choice_widget %}

Answer 1

Ich hatte das gleiche Problem und konnte keine Lösung finden, also habe ich es selbst gelöst. Sie haben recht, Sie müssen tatsächlich den {% block choice_widget %} Block überschreiben. Der erste Schritt besteht darin, die Zeile {{ form_label(child) }} aus dem {% if expanded %} Abschnitt zu entfernen, der ein separates Label ausgibt.

{% block choice_widget %}
{% spaceless %}
    {% if expanded %}

        {% for child in form %}
            {{ form_widget(child) }}
        {#  {{ form_label(child) }} <--------------------- entfernen Sie diese Zeile #}  
        {% endfor %}

    {% else %}

        {% if empty_value is not none %}
            {{ empty_value|trans }}
        {% endif %}
        {% if preferred_choices|length > 0 %}
            {% set options = preferred_choices %}
            {{ block('widget_choice_options') }}
            {% if choices|length > 0 and separator is not none %}
                {{ separator }}
            {% endif %}
        {% endif %}
        {% set options = choices %}
        {{ block('widget_choice_options') }}

    {% endif %}
{% endspaceless %}
{% endblock choice_widget %}

Jetzt müssen Sie das Drucken des Labels im {% block checkbox_widget %} Block behandeln.

{% block checkbox_widget %}
{% spaceless %}
    {{ label|trans }}
{% endspaceless %}
{% endblock checkbox_widget %}

Sie müssen dasselbe für {% block radio_widget %} tun, da es ansonsten jetzt kein Label hätte.

{% block radio_widget %}
{% spaceless %}
    {{ label|trans }}
{% endspaceless %}
{% endblock radio_widget %}

Answer 2

Mit Hilfe von Alberto Gaona und James ist die korrekte Lösung, um BS3-Radio- UND Checkboxen in Symfony 2.4 zu integrieren, wie folgt:

In Ihrer Ansicht haben Sie:

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

// Ein Radio- oder Checkbox-Eingang
{{ form_widget(form.example) }}

Dann in Ihrem fields.html.twig (was https://github.com/symfony/symfony/blob/master/src/Symfony/Bridge/Twig/Resources/views/Form/form_div_layout.html.twig überschreibt; siehe http://symfony.com/doc/current/cookbook/form/form_customization.html)

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

{% block choice_widget_expanded %}
{% spaceless %}

Answer 3

Hinweis: Aktualisierte Lösung von Bob F für Symfony 2.3 (siehe https://github.com/symfony/symfony/blob/2.3/src/Symfony/Bridge/Twig/Resources/views/Form/form_div_layout.html.twig):

Überschreiben von choice_widget_expanded:

{% block choice_widget_expanded %}
{% spaceless %}

    {% for child in form %}
        {{ form_widget(child) }}
    {% endfor %}

{% endspaceless %}
{% endblock choice_widget_expanded %}

Überschreiben von Checkbox (Bootstrap-Stil):

{% block checkbox_widget %}
{% spaceless %}
    {{ label|trans }}
{% endspaceless %}
{% endblock checkbox_widget %}

Überschreiben von Radio-Button:

{% block radio_widget %}
{% spaceless %}
    {{ label|trans }}
{% endspaceless %}
{% endblock radio_widget %}

Answer 4

Wenn ein Label gerendert wird, wird es ein for Attribut enthalten - das verlinkt das label mit dem input - siehe die Dokumentation zu label hier die Änderung der Ausgabe zu dem, was du vorgeschlagen hast, ist nur eine andere Möglichkeit, das label und das input zu verbinden

Wenn du möchtest, dass das Label links vom Eingabefeld angezeigt wird, musst du dein Template ändern zu:

{% for child in form %}

      {{ form_label(child) }}  {{ form_widget(child) }} 

{% endfor %}

Das rendert das label vor dem input und erstellt dann die folgende Ausgabe

Dann kannst du etwas CSS-Styling anwenden, um es inline anzuzeigen:

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

Standardmäßig - ohne jegliches CSS - würde das label vor dem input in diesem HTML-Layout stehen - aber das inline-block erlaubt es dir auch, das width Attribut zu verwenden, um sicherzustellen, dass alle Felder korrekt ausgerichtet sind - unabhängig von der Länge des Label-Textes

Arbeitsbeispiel hier

Answer 5

Das Platzieren der Formulareingabe innerhalb des Label-Tags würde zu fehlerhaftem HTML führen.

Was ist Ihr Ziel? Wenn Sie einfach nur möchten, dass das Label und die Eingabe im Browser auf derselben Zeile angezeigt werden, dann könnten Sie CSS verwenden:

input, label {
 display: inline;
}