Responsiveness in Layout mode

[Darmien]

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

[giuseppebag]

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]

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]

Hi @Darmien 

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