web-dev-qa-db-fra.com

Symfony2 - Comment mettre une étiquette et une entrée pour les cases à cocher/radios sur une même ligne?

Dans mon formulaire, j'ai des cases à cocher, Mais par défaut, J'ai :

  • le premier widget radio
  • le premier label
  • le deuxième widget radio
  • l'étiquette

Voici le code html généré par SYmfony2:

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

Quoi Je voudrais est d'avoir:

le premier widget radio le premier label
le deuxième widget radio la deuxième étiquette

Le code html serait:

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

Je pense que je dois remplacer le choice_widget mais je ne sais pas comment mettre une entrée et une étiquette sur la même ligne

Voici le choice_widget que je devrais peut-être remplacer:

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

J'avais le même problème et je ne pouvais pas trouver de solution alors je l'ai résolu moi-même. Vous avez raison de dire que vous devez remplacer le bloc {% block choice_widget %}. La première étape consiste à supprimer la ligne {{ form_label(child) }} de la section {% if expanded %} qui affiche une étiquette distincte.

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

Il ne vous reste plus qu'à gérer l'impression de l'étiquette dans le bloc {% 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 %}

Vous devrez faire de même pour {% block radio_widget %} car il n’aurait autrement pas d’étiquette.

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

Avec l’aide d’Alberto Gaona et de James, Symfony 2.4 offre la solution correcte pour intégrer la radio BS3 ET les cases à cocher est la suivante:

A votre avis, vous avez:

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

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

Puis dans votre fields.html.twig (qui annule https://github.com/symfony/symfony/blob/master/src/Symfony/Bridge/Twig/Resources/views/Form/form_div_layout.html.twig ; voir 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

REMARQUE: Solution Bob F mise à jour pour Symfony 2.3 (voir https://github.com/symfony/symfony/blob/2.3/src/Symfony/Bridge/Twig/Resources/views/Form/form_div_layout.html.tml ):

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

Remplacer la case à cocher (style bootstrap):

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

Neutraliser le radiobutton 

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

Quand une étiquette est rendue, elle inclut un attribut for - cela lie la label à la input - voir la documentation sur label ici changer le résultat en ce que vous avez suggéré est juste un autre moyen de relier les label et input

Si vous souhaitez que l'étiquette apparaisse à gauche de l'entrée, vous devez modifier votre modèle en:

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

Ce qui rend le label avant le input et ensuite cela crée la sortie suivante

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

Vous pouvez ensuite appliquer un style CSS pour l'afficher en ligne:

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

Par défaut - sans CSS, le label s'alignerait avant le input avec cette présentation HTML - mais le inline-block vous permet également d'utiliser l'attribut width pour vous assurer que tous les champs sont correctement alignés, quelle que soit la longueur du texte de l'étiquette.

Exemple de travail ici

2
ManseUK

Si vous insérez le formulaire dans la balise label, le code HTML sera cassé.

Quel est ton but? Si vous souhaitez simplement que l'étiquette et l'entrée soient affichées sur la même ligne du navigateur, vous pouvez utiliser css:

input, label {
 display: inline;
}
1
MrGlass

Dans Symfony 2.4, cela ne fonctionne pas tout à fait comme prévu.

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

... l'étiquette n'est pas disponible. Vous devez ajouter ce qui suit:

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

Une solution complète est donc:

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

Une étiquette est assez triviale, j'ai donc personnellement préféré la rendre manuellement. 

Rapide et sale dans ta brindille:

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

J'aurais aimé si Symfony avait une solution plus simple pour cela mais peu importe.

Bien sûr, les réponses ci-dessus sont peut-être plus élégantes et ce qui ne l'est pas. ;)

0
Yes Barry