AEM Sites : les composants défilent automatiquement vers le haut lors de la création avec une grille réactive personnalisée.

Cet article décrit comment résoudre un problème dans les sites Adobe Experience Manager (AEM) où les composants défilent automatiquement vers le haut de la page lors de la création lorsqu’une grille réactive personnalisée est utilisée. La solution implique l’examen et l’alignement de l’implémentation de la grille réactive avec les bonnes pratiques.

Description description

Environnement

Sites Adobe Experience Manager (AEM) (toutes versions ; observé dans AEM 6.5 et AEM as a Cloud Service)

Symptômes

Lors de la création de certains composants, tels que Texte ou Image, sur une page qui utilise une grille réactive personnalisée, le composant peut défiler automatiquement vers le haut de la page au lieu de rester au point d’insertion prévu. Ce comportement se produit pendant le processus de création et n’est pas reproductible de manière cohérente sur tous les types de composants. Le composant revient à sa position prévue une fois le contenu ajouté ou la page actualisée. Ce problème ne se produit pas dans une instance AEM propre et prête à l’emploi.

Cause

Le comportement de défilement automatique est provoqué par une incohérence ou un mauvais alignement entre le type de ressource Sling de la grille réactive personnalisée et l’implémentation héritée des composants de base. Cela peut entraîner un comportement inattendu dans l’interface utilisateur de création. Le problème est spécifique aux environnements personnalisés et n’est pas un comportement de produit standard.

Résolution resolution

Suivez les étapes ci-dessous pour résoudre le problème.

  1. Examinez votre implémentation de grille réactive personnalisée :

    1. Ouvrez le modèle ou la structure de la page dans CRXDE Lite ou votre référentiel de code.
    2. Vérifiez le type de ressource Sling pour la grille réactive et ses composants enfants. Assurez-vous que le type de ressource référence systématiquement le type de ressource WCM Foundation ou Composants principaux approprié (par exemple, wcm/foundation/components/responsivegrid ou le composant principal approprié).
  2. Effectuez une comparaison avec l’implémentation prête à l’emploi :

    1. Créez une page ou un modèle à l’aide de l’implémentation de grille réactive prête à l’emploi.
    2. Créez les mêmes composants et observez si le problème de défilement automatique se produit.
    3. Comparez votre implémentation personnalisée à la version prête à l’emploi pour identifier les différences de structure ou de configuration du type de ressource.
  3. Validez la structure et les personnalisations du modèle :

    1. Recherchez tout code personnalisé ou remplacement dans votre grille réactive ou dans les composants de conteneur pouvant affecter la structure DOM ou la gestion des événements lors de la création.
    2. Alignez votre implémentation personnalisée sur les bonnes pratiques utilisées dans la grille réactive d’OOTB.
  4. Tester après avoir apporté des modifications :

    1. Après avoir mis à jour votre implémentation , testez à nouveau la création de composants pour confirmer que le problème est résolu.
    2. Si le problème persiste, supprimez progressivement les personnalisations pour isoler davantage la cause.
  5. Vérifiez que les composants restent au point d’insertion prévu lors de la création et ne font pas défiler automatiquement la page vers le haut.

recommendation-more-help
experience-cloud-kcs-help-kbarticles