Responsiveness in Layout mode | Community
Skip to main content
D
Darmien
May 9, 2025
Solved

Responsiveness in Layout mode

  • May 9, 2025
  • 3 replies
  • 563 views

Is there a way to make components added through child editor responsive in layout Mode? For example, when we include a component in Container component both the container and child component are responsive. Can we achieve same functionality with child components included using child editor for components such as carousel, accordion etc. I tried removing parsys and including components using responsive grid but even then only parent component is responsive

Best answer by giuseppebaglio

hi @darmien, Simply removing parsys and including components with a responsivegrid is not enough; the responsivegrid must be properly configured within each panel, and the component must inherit from the correct supertype and implement the necessary editor hooks.

Core Components (v2+) already implement this pattern for Tabs, Accordion, and Carousel. Use these as references or extend them for custom components.

To enable Layout Mode responsiveness for child components inside panel containers (like Carousel, Accordion, Tabs), follow these guidelines:

  1. Inherit from Panel Container Supertype: Ensure your custom component (e.g., custom Carousel) uses sling:resourceSuperType="core/wcm/components/panelcontainer/v1/panelcontainer". This enables the child editor functionality and aligns with AEM Core Component patterns

  2. Use ResponsiveGrid for Child Panels: Within each panel (e.g., each slide of a Carousel, or each tab/accordion section), include a responsivegrid as the container for child components. This allows each panel’s children to be managed responsively, just like in a standard Layout Container

  3. Enable Layout Mode and Breakpoints: Define breakpoints at the template or page level (under /jcr:content/cq:responsive/breakpoints) to ensure Layout Mode is available for all nested responsivegrids. Also include the necessary responsive CSS and ensure the Emulator is configured for device previews.

  4. Clientlibs and Editor Hooks: Implement the required clientlibs and editor hooks so that the panel selector and child editor UI work seamlessly in Layout Mode. This ensures that when a panel is selected, its child components can be resized or hidden for specific device groups. [1] [2] [3] [4]

  5. When authoring, select the panel (e.g., a Carousel slide), then switch to Layout Mode. The child components within the responsivegrid inside that panel should now display resize handles and other responsive controls, similar to components in a standard Layout Container.

  6.  

 

3 replies

giuseppebaglio
giuseppebaglioAccepted solution
Level 10
May 9, 2025

hi @darmien, Simply removing parsys and including components with a responsivegrid is not enough; the responsivegrid must be properly configured within each panel, and the component must inherit from the correct supertype and implement the necessary editor hooks.

Core Components (v2+) already implement this pattern for Tabs, Accordion, and Carousel. Use these as references or extend them for custom components.

To enable Layout Mode responsiveness for child components inside panel containers (like Carousel, Accordion, Tabs), follow these guidelines:

  1. Inherit from Panel Container Supertype: Ensure your custom component (e.g., custom Carousel) uses sling:resourceSuperType="core/wcm/components/panelcontainer/v1/panelcontainer". This enables the child editor functionality and aligns with AEM Core Component patterns

  2. Use ResponsiveGrid for Child Panels: Within each panel (e.g., each slide of a Carousel, or each tab/accordion section), include a responsivegrid as the container for child components. This allows each panel’s children to be managed responsively, just like in a standard Layout Container

  3. Enable Layout Mode and Breakpoints: Define breakpoints at the template or page level (under /jcr:content/cq:responsive/breakpoints) to ensure Layout Mode is available for all nested responsivegrids. Also include the necessary responsive CSS and ensure the Emulator is configured for device previews.

  4. Clientlibs and Editor Hooks: Implement the required clientlibs and editor hooks so that the panel selector and child editor UI work seamlessly in Layout Mode. This ensures that when a panel is selected, its child components can be resized or hidden for specific device groups. [1] [2] [3] [4]

  5. When authoring, select the panel (e.g., a Carousel slide), then switch to Layout Mode. The child components within the responsivegrid inside that panel should now display resize handles and other responsive controls, similar to components in a standard Layout Container.

  6.  

 

    AmitVishwakarma
    Community Advisor
    AmitVishwakarmaCommunity Advisor
    Community Advisor
    May 9, 2025

    Hi @darmien ,

    Try below steps:

    1. Use the Correct Supertype

    Set this in your component:

    sling:resourceSuperType="core/wcm/components/panelcontainer/v1/panelcontainer"

    This enables AEM's built-in child editor functionality and ensures proper behavior in Layout Mode.

    2. Each Panel Should Contain a ResponsiveGrid

    In your HTL:

    <div data-sly-list.panel="${panels}"> <div class="cmp-carousel__item"> <div data-sly-resource="${panel.name @ resourceType='wcm/foundation/components/responsivegrid'}"></div> </div> </div>

    Avoid using parsys. Only responsivegrid supports Layout Mode.

    3. Configure Breakpoints

    In your template configuration (/conf/<site>/settings/wcm/...), define breakpoints like this:

    /conf/<site>/settings/wcm/template-types/page-template/policies cq:responsive breakpoints mobile tablet desktop

    Without this, Layout Mode won’t work even if everything else is correct.

    4. Enable Clientlibs

    Add this to load the required behavior for Layout Mode:

    <cq:includeClientLib categories="core.wcm.components.container.v1"/>

     

    Regards,
    Amit

    arunpatidar
    Community Advisor
    arunpatidarCommunity Advisor
    Community Advisor
    May 10, 2025

    Hi @darmien 

    If you use container component with responsive layout as a wrapper/container for the children component, then responsiveness will work 

    Arun Patidar
    Supriya_Savre
    Supriya_Savre
    Level 4
    May 23, 2025

    Hi @darmien,

    I hope the response shared above helped address your query. If it did, please mark the most helpful one as "correct", this helps others in the community find helpful solutions more easily.

    If you’re still facing any challenges, please feel free to continue the conversation here. We’re happy to support further.

     

    Terms & ConditionsAccessibility statement

    Loading footer...