DocumentationExperience Cloud KCS

AEM Sites: Components auto-scroll to top during authoring with customized responsive grid

Last update: October 16, 2026

This article describes how to address an issue in Adobe Experience Manager (AEM) Sites where components auto-scroll to the top of the page during authoring when a customized responsive grid is used. The solution involves reviewing and aligning the responsive grid implementation with best practices.

Description description

Environment

Adobe Experience Manager (AEM) Sites (all versions; observed in AEM 6.5 and AEM as a Cloud Service)

Symptoms

When authoring certain components, such as Text or Image, on a page that uses a customized responsive grid, the component may automatically scroll to the top of the page instead of remaining at the intended insertion point. This behavior occurs during the authoring process and is not consistently reproducible across all component types. The component returns to its intended position after content is added or the page is refreshed. This issue does not occur in a clean, out-of-the-box (OOTB) AEM instance.

Cause

The auto-scroll behavior is caused by a mismatch or misalignment between the customized responsive grid’s Sling resource type and the inherited implementation from the Foundation Components. This can result in unexpected behavior in the authoring UI. The issue is specific to customized environments and is not a standard product behavior.

Resolution resolution

Follow the steps below to resolve the issue.

  1. Review your customized responsive grid implementation:

    1. Open your template or page structure in CRXDE Lite or your code repository.
    2. Check the Sling resource type for the responsive grid and its child components. Ensure that the resource type consistently references the appropriate WCM Foundation or Core Components resource type (for example, wcm/foundation/components/responsivegrid or the relevant Core Component).

  2. Compare with the out-of-the-box (OOTB) implementation:

    1. Create a new page or template using the OOTB responsive grid implementation.
    2. Author the same components and observe whether the auto-scroll issue occurs.
    3. Compare your customized implementation with the OOTB version to identify any differences in structure or resource type configuration.

  3. Validate the template structure and customizations:

    1. Check for any custom code or overrides in your responsive grid or container components that might affect the DOM structure or event handling during authoring.
    2. Align your customized implementation with the best practices used in the OOTB responsive grid.

  4. Test after making changes:

    1. After updating your implementation, test component authoring again to confirm whether the issue is resolved.
    2. If the issue persists, remove customizations incrementally to further isolate the cause.

  5. Confirm that components remain at the intended insertion point during authoring and do not auto-scroll to the top.

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