Discussion :

[vinsse2001]

Bonjour à tous,
J'utilise Symfony 2.1, j'ai suivi le cookbook pour personnaliser le label des formulaires, où le champ est obligatoire, afin d'ajouter automatiquement une astérisque rouge.
Seulement, cette astérisque apparaît à gauche du champ input

au lieu d'être juste à droite du texte du label (ce qui permet de garder alignés les champs input).


Le code généré est le suivant :

Code :

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

<label for="foo" class="required">Foo</label><span class="red">*</span>

alors que je voudrais avoir :

Code :

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

<label for="foo" class="required">Foo<span class="red">*</span></label>

(je suppose que je pourrais contourner le problème en incluant le label dans un div, sur lequel je reporte le CSS pour que tout soit aligné, mais ça ne paraît pas très "propre", je préférerais utiliser une méthode "officielle" symfony pour que le label généré soit ok.)

Merci d'avance pour toute aide !

[gototog]

il faut simplement bidouiller le css de required

[vinsse2001]

Je ne vois pas trop comment bidouiller le CSS... Actuellement, j'ai ça sur les label afin de forcer la largeur à 200px :

Code :

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

1
2
3
4
5
6
7
8
9
 
/* Extrait du style.css */
label {
    display: inline-block;
    width: 200px;
	color: #333333;
	font-size: 0.8em;
	vertical-align: top;
}

Le code généré par le formulaire Symfony va placer l'astérisque APRES le label, ce qui explique évidemment l'affichage obtenu. Comme tous les champs ne sont pas forcément en required, je ne vois pas ce que je peux faire sur le css 'required' ?? Si tu as un exemple de code, je suis preneur

Entre temps, j'ai trouvé une autre réponse qui fonctionne, c'est de créer une vue pour enrichir le formulaire de base :

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
 
// src\Acme\MonBundle\Resources\views\Form\fields.html.twig
 
{% extends 'form_div_layout.html.twig' %}
{% block form_label %}
{% spaceless %}
    {% if label is not sameas(false) %}
        {% if not compound %}
            {% set label_attr = label_attr|merge({'for': id}) %}
        {% endif %}
        {% if required %}
            {% set label_attr = label_attr|merge({'class': (label_attr.class|default('') ~ ' required')|trim}) %}
        {% endif %}
        {% if label is empty %}
            {% set label = name|humanize %}
        {% endif %}
        <label{% for attrname, attrvalue in label_attr %} {{ attrname }}="{{ attrvalue }}"{% endfor %}>{{ label|trans({}, translation_domain) }}
 
           {% if required %}
              <span class="obligatoire" title="Ce champ est obligatoire">*</span>
           {% endif %}
 
        </label>
    {% endif %}
{% endspaceless %}
{% endblock form_label %}

Je déclare l'utilisation de ce template dans ma page où j'affiche le formulaire :

Code :

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

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

et j'obtiens le résultat attendu (le html avec l'astérisque à l'intérieur de la balise label, d'où un affichage correct !).

A+)