Corriger le bug d'affichage de connexion au backoffice de PrestaShop sous Google Chrome

Tutoriel pour vous expliquer comment corriger le bug présent sur Prestashop avec le navigateur Google Chrome et sa version 99

Voici quelque jour que la version 99 du navigateur Google Chrome est arrivée sur le marché et se diffuse sur les ordinateurs des utilisateurs de ce navigateur.

Je vous ferais grâce de mon avis et des multiples "améliorations" apportées par cette nouvelle version de ce navigateur, mais j'attire votre attention sur un bug apparu sur Prestashop pour les utilisateurs de ce navigateur.

La communauté a relevé ce bug voilà 4 jours et une solution fut apportée dès hier pour le corriger.

C'est lors de ce genre d'événement que l'open source prend tout son sens avec une mise e commun des compétences pour pallier rapidement aux soucis pouvant apparaitre sur un projet.

Le bug

L'affichage du formulaire de connexion au backoffice est perturbé sur le traitement de certaines classes de mise en forme CSS comme le montre l'image ci-dessous.

Correction PrestaShop 1.6 et PrestaShop 1.7

Vous devez corriger le template de connexion ainsi :

Ouvrez le fichier votre-dossier-admin/themes/default/template/controllers/login/content.tpl

Remplacez les lignes

<div class="form-group">
 <div id="remind-me" class="checkbox pull-left">

Par

<div class="form-group row">
 <div id="remind-me" class="checkbox col-xs-6">

Puis remplacez la ligne

<a href="#" id="forgot-password-link" class="show-forgot-password pull-right" >

Par

<a href="#" id="forgot-password-link" class="show-forgot-password col-xs-6 text-right">

Résultat

Conclusion

Ce bug n'est pas bloquant, donc vous n'avez pas d'urgence à le corriger surtout si vous avez la bonne idée de préférer le navigateur FireFox.

Néanmoins, l'attitude de Google vis-à-vis du respect des standards W3C peut pousser à faire évoluer la norme vers ce traitement et donc amener les autres navigateurs à s'y conformer, vous obligeant à faire cette correction pour qu'elle soit prise en compte sur tous les navigateurs.