Monday, February 27, 2023

Responsive Layouts not working for the nested containers - Adobe Experience Manager(AEM)

The responsive layout resizing was not working for the nested 3rd-level containers in the Editable template.

The responsive layout containers with Editable templates help the authors to manage the page layouts through drag-and-drop resizing. But it looks to be the resizing is not working when nested more than two levels - the resizing stopped working in the 3rd level.

The actual issue is the responsive configurations (cq:responsive node) are not inherited to the 3rd level.

Added a container (container1) 

  •   Container(container1) is aligned to a specific column, e.g., 8.
  •   Added a child container 2 to the container 1.
  •   Added a child container 3 to container 2.
  •   Made container 3 a responsive grid.
  •   Added a text component to container 3.
  •   Layouting not working for the text component.

Workaround: Resize container 3 to a different column size and return to the original column size — this will add the cq:responsive node to container 3 and allow the layout for the text component.




1 comment:

  1. Hello Albin,

    Thank you for posting this, I thought I was going crazy! It is a bug on a very fundatmental aspect of authoring and yet very little mention of it exists online...

    I am experiencing this bug on 6.5.18 and 6.5.19 (nto sure about previous versions). I have reproduced the bug using only the OOTB "Layout Container" (/libs/wcm/foundation/components/responsivegrid) meaning it is a bug in AEM itself, not in Core Components.

    Did you ever find a better solution than asking authors to perform this workaround? Alternately, do you have an Adobe support ticket on this topic? If so, what was the outcome?

    Thanks,
    Theo Pendle

    ReplyDelete