La position d'un champ est surchargée dans la tranche "Mobile" et/ou "Tablette" : dans le navigateur, cette surcharge de position et de taille provoque la superposition de champs.
Quel est le problème ? La surcharge de position dans la tranche "Mobile" et/ou "Tablette" ne conserve pas l'ordre des champs défini dans la tranche "Bureau" (qui sert de tranche de référence en mode "Desktop First").
En mode "Responsive Web Design", les champs sont ordonnés les uns par rapport aux autres. Cet ordre dépend de la position (de haut en bas puis de gauche à droite) et de l'ancrage. Il doit être respecté à l'identique dans toutes les tranches.
En effet, la technologie "Responsive Web Design" utilise un seul flux HTML pour toutes les tranches, en repositionnant les champs par CSS. L'ordre des champs dans la tranche de référence détermine l'ordre des champs dans le flux HTML.
Exemple : 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 :
- la cellule CELL_1 qui regroupe la seconde cellule CELL_2 et l'image,
- la cellule CELL_2,
- l'image.
Dans la tranche "Mobile", une surcharge de la taille et de la position des champs est effectuée : l'image est placée avant la cellule CELL_2. L'ordre des champs dans la tranche "Mobile" diffère donc de l'ordre des champs de la tranche "Bureau" :
En exécution, l'ordre des champs de la tranche "Bureau" n'étant pas respecté dans la tranche "Mobile", il y a une superposition : l'image va déborder sur la cellule CELL_2 et elle ne pourra pas la "pousser" :
Pour éviter toute superposition inattendue dans le navigateur, il faut donc s'assurer que l'ordre des champs dans la tranche "Mobile" et dans la tranche "Tablette" est le même que celui de la tranche "Bureau" (tranche de référence).
Dans notre exemple, pour obtenir ici le résultat attendu, il est possible d'utiliser deux champs Image :
- Le premier champ Image sera placé avant le champ CELL_2 dans la tranche Bureau (donc il sera en premier dans l'ordre des champs dans la tranche de référence). Il sera visible uniquement dans la tranche "Mobile".
- Le second champ Image sera visible uniquement dans la tranche "Bureau".
Afin de faciliter le positionnement des champs dans la tranche "Mobile" et/ou "Tablette", à partir de la version 21 Update 3, une erreur de compilation d'UI est systématiquement générée par l'éditeur de pages en cas de non respect de l'ordre des champs entre les différentes tranches.