Mustache, décalage du texte

Salut :D
Voulant tester Mustache j'ai crée une page devant afficher une liste des article qui se trouve sur une bdd mysql.

Je récupère le résultat de ma bdd en json via ajax puis je la parse pour pouvoir l'utiliser correctement via js.

Cette requête donne (en json) :

Code:

1
2
3
4
5
6
7
8
9
10
* {
 * "id_categorie":"CATEGORIE",
 * "titre":"TITRE",
 * "image":"IMAGE",
 * "id":"ID",
 * "datetime":"DATE",
 * "texte":"TEXTE",
 * "description":"DESCRIPTION",
 * "couleur":"COULEUR"
 * }

Pour ce qui est du html j'ai écrit ceci :

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
<section class="content">
 
    <div class="container">
 
        <div id="loading"> Chargement... </div>
 
        <div class="row" id="gridBlog">
 
            {{#blog}}
            <div class="col-xl-4 col-lg-6 col-12 hidden" id="card">
                <div class="card">
                    <div class="cardHeader">
                        <img src="../{{image}}">
                    </div>
                    <div class="cardBody">
 
                        <div class="cardMore">
                            <a href="#"><i class="material-icons">add</i></a>
                        </div>
 
                        <div class="cardMeta">
                            <p>{{id_categorie}}</p>
                            <time>{{datetime}}</time>
                        </div>
                        <article class="cardArticle">
                            <h2><a href="url">{{{titre}}}</a></h2>
                            <p>{{{description}}}</p>
                        </article>
                    </div>
                    <div class="cardFooter">
                        <img src="http://lorempixel.com/40/40/sports/">
                        <div>By Hadock</div>
                    </div>
                </div>
            </div> <!--col-->
            {{/blog}}
 
        </div> <!--row-->
 
    </div> <!--container-->
 
</section> <!--content-->

Et ma requête ajax + mustache (il y a du js et du jquery dedans je sait :pastaper:) :

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
function code (elem) {
    console.log('code erreur : ' + elem + ' ' + elem.status+ ' ' + elem.statusText); //code check dans la console
}
 
var card = document.getElementById('card');
var load = document.getElementById('loading');
var grid = document.getElementById('gridBlog');
 
 
var req = new XMLHttpRequest();
req.open('GET', 'getAll.php');
req.send(null);
 
req.addEventListener('load', function(){ //lorsque la ressource est préte
    if(req.status == 200) { //et que tout est bon
        code(req);
 
        card.classList.toggle('hidden');
        load.classList.toggle('hidden');
 
        var tabs = JSON.parse(req.responseText);
 
        $('#gridBlog').html(Mustache.render($('#gridBlog').html(), {blog : tabs} ));
 
    }
});

Du coup lors du rendu tout s'affiche bien mais la première ligne du titre est décaler, ce qui n'arrive pas si je supprime la boucle de mustache (il n'y a pas de rajout de css) :?
Pièce jointe 302630

Vous avez une idée de ce qui pourrais clocher? Merci d'avance!