[Form] Personnaliser le field_row des checkboxes

Version imprimable

25/08/2011, 10h52
Ph3nol

[Form] Personnaliser le field_row des checkboxes

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.
25/08/2011, 10h57
winzou

Salut,

La doc sur le form theming est pour toi : http://symfony.com/doc/current/book/...l#form-theming ;)
25/08/2011, 11h00
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 ! :)
25/08/2011, 11h27
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.
25/08/2011, 11h31
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 %}

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:

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.

25/08/2011, 12h00
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.

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:

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 :ccool:

25/08/2011, 14h24
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.
26/08/2011, 04h26
winzou

Décidément Symfony me surprendra toujours !

On peut aussi tester le type du champ :

Code:

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