[4.x] Template twig sous Symfony

2 pièce(s) jointe(s)

Template twig sous Symfony

Bonjour,

j'ai récupéré les sources d'un espace membre sur : https://geekco.fr/blog/mini-serie-cr...-symfony-4-1-5

et ai changé le thème. Je n'arrive pas à obtenir un visuel identique sur l'ensemble des templates. Voici vers quoi je veux tendre:

Pièce jointe 489668

mais voilà ce que j'obtiens sur un deuxième template

Pièce jointe 489672

le code de mon template base.html.twig:

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
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>
            {% block title %}
                DDFIP03
            {% endblock %}
        </title>
        {% block stylesheets %}
            <link rel="stylesheet" href="/css/bootstrap.min.css" />
        {% endblock %}
    </head>
    <body>
 
        {% block menu %}
			{{include('menu.html.twig')}}
        {% endblock %}
 
 
        {% block flash %}
            {{include('flash.html.twig')}} 
        {% endblock %}
 
        {% block body %}
        {% endblock %}
        <script src="/js/jquery.min.js"></script>
        <script src="/js/popper.min.js"></script>
        <script src="/js/bootstrap.min.js"></script>
        {% block javascripts %}
        {% endblock %}
    </body>
</html>

le code de mon template login.html.twig:

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
{% extends('base.html.twig') %}
 
{% block body %}
    <p></p>
    <div class="container">
        <div class="row">
            <div class="col-md-3">&nbsp;</div>
                <div class="col-md-6">
                    <div class="bg-light py-3 px-3">
                        <h2 class="text-center">Veuillez vous connecter !</h2>
                        <form action="{{ path('connexion') }}" method="post">
                            <div class="form-group">
                                {% if error %}
                                    <div class="callout warning">{{ error.messageKey|trans(error.messageData, 'security') }}</div>
                                {% endif %}
                                <label for="username">Identifiant</label>
                                <input type="text" id="username" name="_username" class="form-control" value="{{ last_username }}" required/>
                            </div>
                            <div class="form-group">
                                <label for="password">Mot de passe:</label>
                                    <input type="password" id="password" name="_password" class="form-control" required/>
                                <p></p>
                                <p>
                                    <a href="{{path('request_resetting')}}">Mot de passe oublié ?</a>
                                </p> 
                            </div>
                            <div class="form-group">
                                <input type="hidden" name="_target_path" value="{{ path('account') }}"/>
                                <input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}" >
                                <button type="submit" class="btn btn-success">Connexion</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

le code de mon template request.html.twig qui me pose des problèmes:

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
{% extends('base.html.twig') %}
 
{% block body %}
 <p></p>
    <div class="container">
            <div class="row">
                <div class="col-md-3">&nbsp;</div>
                    <div class="col-md-6">
                        <div class="bg-light py-3 px-3">
                            <h2>Mot de passe oublié ?</h2>
                            <p>Réinitialisez votre mot de passe en renseignant votre BALF.</p>
                            {#<div class="form-group">#}
                                {{form_start(form)}}
                                {{form_row(form.email)}} 
                                <p></p>                           
                                <button class="btn btn-success" type="submit">Envoyer</button>
                                {{form_end(form)}}
                            {#</div>#}
                        </div>
                    </div>
            </div>
        </div>
    </div>
{% endblock %}

J'ai été sur le site de Symfony https://symfony.com/doc/4.1/referenc...reference.html sans succès.

Pouvez vous SVP m'aiguiller dans ma démarche?

Merci

Eric

Salut,

La différence semble venir du fait que le formulaire de login est écrit en HTML directement dans le template Twig, alors que le formulaire de mot de passe oublié utilise le composant Form de Symfony pour générer le HTML. A priori vu le résultat, ce dernier ne sait pas qu'il "doit" utiliser un "Form Theme" Boostrap pour générer les champs.

Pour remédier à cette situation : https://symfony.com/doc/current/form/bootstrap4.html
Soit de manière globale en modifiant le fichier config/packages.twig.yaml (ainsi tous les formulaires générés par Symfony utiliseront ce thème), soit de manière restreinte à ce formulaire précis en ajoutant {% form_theme form 'bootstrap_4_layout.html.twig' %} dans le ou les template(s) Twig souhaités.

:merci:

Cela fonctionne parfaitement

Eric