FAQ n°12701, publiée le 10/05/2016, mise à jour le 17/06/2016
WEBDEV
Edition "Responsive Web Design", pourquoi un champ dans le navigateur peut être sous un autre, au lieu d'être à côté comme dans l'éditeur de pages ?
Dans l'éditeur de pages, lorsque le mode d'édition est  "Responsive Web Design" (RWD), les champs sont positionnés sur la grille. A l'exécution de la page, en fonction de la largeur du navigateur les colonnes de la grille sont ajustées en largeur. Si des champs alignés horizontalement sur une même ligne sont ancrés sur la grille et d'autres conservent leur taille d'édition, le changement de la largeur des colonnes de la grille dans le navigateur peut "décaler" ou "pousser" un champ sous un autre :




Ces décalages qui peuvent survenir dans les navigateurs, sont montrés dans l'éditeur de pages par des débordements (hachures) ou superposition (magenta). Afin d'éviter ces décalages dans les navigateurs, il faut donc : 
  • activer les erreurs d'IHM, dans le volet "Erreur de compilation",
  • cocher la mise en évidence des "erreurs de superposition" dans le volet "Affichage" du ruban,


  • vérifier et corriger les erreurs et débordements montrés dans les différentes tranches, en commençant par la tranche bureau.


A noter que ceci n'est pas un défaut de "wysiwyg" de l'éditeur de pages. L'éditeur de pages ne "décale" pas, ou ne "pousse" pas un champ comme dans le navigateur, au contraire volontairement il montre le débordement ou la superposition. Cela permet au développeur de la page :
  • de déterminer le comportement responsive qui sera le plus adapté en fonction du contenu de la page, plutôt que d'avoir un comportement final dépendant du navigateur
  • permet d'effectuer tous les positionnements nécessaires tranche après tranche, en débutant par la tranche bureau.


Liens utiles sur ce thème :