wake-up-neo.com

Symfony2 - Wie können Beschriftungen und Eingaben für Kontrollkästchen/Funkgeräte in einer Zeile stehen

In meinem Formular habe ich einige Checkboxen Aber standardmäßig Ich habe :

  • das erste Radio-Widget
  • das erste Etikett
  • das zweite Radio-Widget
  • das Etikett

Hier ist der von SYmfony2 generierte HTML-Code:

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

Was Ich will ist zu haben :

das erste Radio-Widget das erste Label
das zweite Funk-Widget das zweite Label

Der HTML-Code wäre:

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

Ich denke, ich muss das choice_widget überschreiben, weiß aber nicht, wie man Eingabe und Beschriftung in dieselbe Zeile setzt

Hier ist das choice_widget, das ich möglicherweise überschreiben muss:

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

Ich hatte das gleiche Problem und konnte keine Lösung finden, also habe ich es selbst herausgefunden. Es ist richtig, dass Sie den {% block choice_widget %}-Block überschreiben müssen. Der erste Schritt besteht darin, die {{ form_label(child) }}-Zeile aus dem {% if expanded %}-Abschnitt zu entfernen, der ein separates Etikett druckt.

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

Jetzt müssen Sie nur noch das Etikett im Block {% block checkbox_widget %} drucken.

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

Sie müssen dasselbe für {% block radio_widget %} tun, da es sonst keine Bezeichnung hätte.

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

Mit der Hilfe von Alberto Gaona und James ist die korrekte Lösung für Symfony 2.4 zur Integration von BS3-Radio-UND-Checkboxen wie folgt:

Aus Ihrer Sicht haben Sie:

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

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

Dann in Ihren Feldern.html.twig (was überschreibt https://github.com/symfony/symfony/blob/master/src/Symfony/Bridge/Twig/Resources/views/Form/form_div_layout.html.twig ; 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 %}
    <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

HINWEIS: Aktualisierte Bob F-Lösung 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 Sie 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 %}

Überschreibe das Kontrollkästchen (Bootstrap-Style):

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

Radiobutton überschreiben 

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

Wenn ein Label gerendert wird, wird es ein for-Attribut enthalten - dies verknüpft die label mit der input - siehe die Dokumentation zu label hier Das Ändern der Ausgabe in das, was Sie vorgeschlagen haben, ist nur eine weitere Möglichkeit, die label und die input zu verknüpfen.

Wenn das Etikett links von der Eingabe angezeigt werden soll, müssen Sie Ihre Vorlage folgendermaßen ändern:

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

Dabei wird die label vor der input gerendert und anschließend die folgende Ausgabe erstellt

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

Sie können dann etwas CSS-Styling anwenden, um es inline anzuzeigen:

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

Standardmäßig würde sich label ohne CSS mit diesem HTML-Layout vor input ausrichten. Mit inline-block können Sie jedoch auch das width-Attribut verwenden, um sicherzustellen, dass alle Felder korrekt angeordnet sind - unabhängig von der Länge des Beschriftungstextes

Arbeitsbeispiel hier

2
ManseUK

Wenn Sie die Formulareingabe in das Label-Tag einfügen, wird HTML beschädigt.

Was ist dein Ziel? Wenn Sie lediglich das Etikett und die Eingabe in der gleichen Zeile im Browser anzeigen lassen möchten, können Sie css verwenden:

input, label {
 display: inline;
}
1
MrGlass

In Symfony 3+ können Sie die Radio-Inline-Klasse einfach über label_attr an Ihr Formular übergeben:

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

Keine Notwendigkeit, benutzerdefinierte Widgets zu erstellen oder so ...

sie können diese Dinge erraten, indem Sie sich die von Symfony angebotene Datei bootstrap_4_layout.html.twig in Ihrem Anbieterverzeichnis ansehen (src/Symfony/Bridge/Twig/Resources/views/Form/bootstrap_4_layout.html.twig).

Hoffe das hilft.

0

In Symfony 2.4 funktioniert dies nicht ganz wie erwartet.

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

... das Etikett ist nicht verfügbar. Sie müssen Folgendes hinzufügen:

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

Eine vollständige Lösung ist also:

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

Ein Label ist ziemlich trivial, also habe ich es persönlich vorgezogen, es manuell zu rendern. 

Schnell und schmutzig in deinem Zweig:

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

Ich hätte mir gewünscht, wenn Symfony dafür eine einfachere Lösung hätte.

Natürlich sind die obigen Antworten vielleicht eleganter und was nicht. ;)

0
Yes Barry