Discussion :

[Ph3nol]

Bonjour,

J'ai une question toute simple : comment personnaliser le field_row des checkboxes de mon formulaire ?

Le but est de ne pas avoir les checkboxes les unes à la suite des autres mais en liste (ul > li).

Merci par avance.

[winzou]

Salut,

La doc sur le form theming est pour toi : http://symfony.com/doc/current/book/...l#form-theming

[Ph3nol]

Merci pour ta réponse.

J'avais déjà parcouru la doc, mon problème ne concerne pas le form theming, mais le cas particulier d'un field_row de checkbox !

[winzou]

? Bah c'est exactement ca.

Regarde ce que tu peux personnaliser ici : https://github.com/symfony/symfony/b...yout.html.twig
Et personnalise le en suivant la doc que j'ai mis au dessus.

[lidaa]

c'est exactement le bloc checkbox_widget:

{% block checkbox_widget %}
{% spaceless %}

<li>

<input type="checkbox" {{ block('widget_attributes') }}{% if value is defined
%} value="{{ value }}"{% endif %}{% if checked %} checked="checked"{% endif %} />

</li>

{% endspaceless %}
{% endblock checkbox_widget %}

[Ph3nol]

J'ai également vu cela, mais justement, je n'ai rien trouvé pour personnaliser le field_row de checkboxes (pas de checkbox_field_row ou chose dans le genre !).

Mon fields.html.twig actuel :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
{% block field_row %}
    {% spaceless %}
        <div class="clearfix">
            {{ form_label(form, label) }}
 
            <div class="input">
                {{ form_widget(form) }}
                {{ form_errors(form) }}
            </div>
        </div>
    {% endspaceless %}
{% endblock field_row %}

(j'ai adapté pour l'utilisation du framework CSS Twitter - Bootstrap)

Comment intégrerais-tu la personnalisation du field_row des checkboxes pour avoir une liste ul > li avec ça ?

Merci encore pour tes réponses.

[winzou]

Aah ok. Tu peux pas. C'est pas logique, imagine t'es en layout table, il te met une balise table avant, des tr au milieu, puis quand il arrive aux checkboxes, des li ? Non c'est impossible.

Par contre si t'as un formulaire avec que des checkboxes, et que tu veux que tout soit en li, tu peux créer un layout_ul.

[pc.bertineau]

Voici la personnalisation que j'ai faite (extrait) :

Certaines choses sont spécifiques à mon code (attr.noLabel et attr.chkbx_style).... Tu peux te servir de attr pour définir une classe (pas au sens CSS, mais un attributs personnalisé, comme mes chckbx_style ) sur laquelle tes checkboxs seront affichées en liste

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
 
 
{# Pas de label global sur les choices expanded #}
{% block choice_row %}
{% spaceless %}
<div class="field_row">
      {#{% if not expanded %}
         {{ form_label(form) }}
      {% endif %}#}
      {% if  not attr.noLabel is defined %}
         {{ form_label(form) }}
      {% endif %}
      {% if help is defined %}
         {{ form_widget(form, {'help':help, 'attr':attr}) }}
      {% else %}
         {{ form_widget(form, {'attr':attr}) }}
      {% endif %}
      {{ form_errors(form) }}
</div>
<div class="spacer"></div>
{% endspaceless %}
{% endblock choice_row %}
 
{# Le label vient après l'input sur les radios #}
{% block radio_row %}
{% spaceless %}
<div class="field_row">
      {{ form_widget(form, {'attr':attr}) }}
      {{ form_label(form) }}
      {{ form_errors(form) }}
</div>
<div class="spacer"></div>
{% endspaceless %}
{% endblock radio_row %}
 
{% block checkbox_row %}
{% spaceless %}
<div class="field_row">
   {% if attr.chkbx_style is defined %}
      {% if attr.chkbx_style == 'left_label' %}
      {# Le label est placé avant l'input sur les checkbox (s'intègre dans la disposition standard des forms) #}
         {{ form_label(form, null, {'attr' : attr}) }}
         {% if help is defined %}
               {{ form_widget(form, {'help':help, 'attr':attr}) }}
         {% else %}
               {{ form_widget(form, {'attr':attr}) }}
         {% endif %}
         {{ form_errors(form) }}
      {% endif %}
   {% else %}
   {# Le label vient après l'input si left_label n'est pas déclaré #}
         {% if help is defined %}
               {{ form_widget(form, {'help':help, 'attr':attr}) }}
         {% else %}
               {{ form_widget(form, {'attr':attr}) }}
         {% endif %}
         {{ form_label(form) }}
         {{ form_errors(form) }}
   {% endif %}
</div>
<div class="spacer"></div>
{% endspaceless %}
{% endblock checkbox_row %}

Donc pour moi c'est possible

[Ph3nol]

Génial pc.bertineau, c'est exactement ce que je cherchais. Je vais me pencher sur cet exemple en l'adaptant à mon cas (le framework CSS Twitter Bootstrap).

Merci à tous.

[winzou]

Décidément Symfony me surprendra toujours !

[eDauv]

On peut aussi tester le type du champ :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
{% block field_row %}
{% spaceless %}
    {% if 'checkbox' in types %}
        <!-- Mise en forme pour les checkboxes -->
    {% else %}
        <!-- Mise en forme par defaut -->
    {% endif %}
{% endspaceless %}
{% endblock field_row %}