FAQ n°12790, publiée le 23/05/2016, mise à jour le 17/06/2016
WEBDEV
Édition des pages en mode "Responsive Web Design", pourquoi la surcharge de position et de taille des champs faite dans une tranche mobile ou tablette, peut provoquer une superposition dans le navigateur ?
Lorsque la position d'un champ est surchargée dans la tranche mobile et/ou tablette, le rendu dans le navigateur peut ne pas être celui attendu : la surcharge de position et de taille peut provoquer la superposition de champs.

Cela se produit si la surcharge de position dans la tranche mobile et/ou tablette, ne conserve pas l'ordre des champs qui a été défini dans la tranche bureau qui sert de tranche de référence. En effet en édition "Responsive Web Design", les champs sont ordonnés les uns par rapport aux autres. Cet ordre dépendant de la position (de gauche à droite puis de haut en bas) et de l'ancrage, doit être respecté à l'identique dans toutes les tranches. Cette nécessité n'est pas directement liée à WEBDEV, mais trouve son origine dans la technologie "Responsive Web Design". En effet la technologie "Responsive Web Design" utilise un seul flux HTML pour toutes les tranches, en repositionnant les champs par CSS. C'est l'ordre des champs dans la tranche de référence qui détermine l'ordre des champs dans le flux HTML.

Dans l'exemple suivant la page contient une cellule regroupant une autre cellule et une image : 



L'ordre des champs dans la tranche bureau, la tranche de référence, est : 
  1. la cellule CELL_1 qui regroupe la seconde cellule CELL_2 et l'image,
  2. la cellule CELL_2
  3. l'image
Dans la tranche mobile une surcharge de la taille et de la position des champs est faite, l'image est placée avant la cellule CELL_2 contrairement à ce qui est fait dans la tranche bureau, la tranche de référence. L'ordre des champs dans la tranche mobile diffère donc de l'ordre des champs de la tranche bureau : 



Le résultat dans le navigateur ne sera pas satisfaisant, car l'ordre des champs de la tranche bureau, n'est pas respecté dans la tranche mobile. Il y aura une superposition car l'image va déborder sur la cellule CELL_2, elle ne pourra pas la "pousser" : 



Afin de supprimer toute superposition inattendue dans le navigateur, il faut donc s'assurer que dans la tranche mobile et la tranche tablette, l'ordre des champs est bien le même que celui de la tranche bureau (tranche de référence).

Pour obtenir ici le résultat attendu, il est possible d'utiliser deux champs images au lieu d'un seul : le premier placer avant CELL_2 dans la tranche bureau (donc premier dans l'ordre des champs dans la tranche de référence), sera visible uniquement dans la tranche mobile. Le second, le champ actuel, ne sera visible que dans la tranche bureau.

Afin de faciliter le positionnement des champs dans la tranche mobile et/ou tablette, à partir de la version 21 Update3, une erreur de compilation d'IHM sera systématiquement générée par l'éditeur de pages en cas de non respect de l'ordre des champs entre différentes tranches.