Responsivity bug with OOTB Layout Container (wcm/foundation/components/responsivegrid)

[Theo_Pendle]

Hello all, 

I've recently discovered a but that affects at least on prem v6.5.18+. I have created a support ticket but would be interested to see if the community has been facing anything similar and see if there is a working solution.

The issue was previously mentioned by @Albin_Issac on his blog: https://www.albinsblog.com/2023/02/responsive-layouts-not-working-for-nested-containers-aem.html

You can see a reproduction of the bug via this git diff (a sample template, policies and page): https://github.com/theopendle/aem-demo/compare/cd123fd4f766399887171f20bad0284014dd9f09...03d089a274...

Here are the steps to reproduce:

Steps to reproduce

1. Create a new page under /content/demo/us/en using the Test template template.

2. Add Layout Container (container1) into the root container:

   

3. Add another Layout Container into container1

    

    

4. Add a Title into container2: 

   

Result

With each successive level of nesting, the components occupy less and less width.

This seems to be caused by a bug whereby the AEM editor 'loses track' of the responsive width inheritance. Here is a table of expected vs actual behaviour:

Container	cq:responsive	Expected	Actual
root	width=6	6 of 12 columns	6 of 12 columns
container1	none	6 of 12 columns (inherited from parent)	6 of 12 columns (inherited from parent)
container2	none	6 of 12 columns (inherited from parent)	3 of 12 columns (inheritence is broken, container takes 6 of 6 of 12) instead

Workarounds

There are 2 workarounds that authors can use to resolve the issue, but both are very time-consuming and prone to human error. As a result, this bug has a serious impact on the authoring UX and leads to many visual bugs on the website.

1. Refresh the webpage with F5 after creating each component
2. When placing a Layout Container, use the layout mode to manually resize to full width

[pulkitvashisth · Accepted solution]

Hi @Theo_Pendle 
Here are some references to solutions posted online that may be of help:

1. https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/layout-mode-and-responsive...
2. https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/custom-layout-container-re...
3. https://experienceleague.adobe.com/docs/experience-manager-cloud-service/content/sites/authoring/fea...
4. https://www.albinsblog.com/2023/02/responsive-layouts-not-working-for-nested-containers-aem.html
5. https://github.com/theopendle/aem-demo/compare/cd123fd4f766399887171f20bad0284014dd9f09...03d089a274

Let me know if any of these work for you / or are relevant.

[kautuk_sahni]

@arunpatidar , @aanchal-sikka, @Mahedi_Sabuj @Jörg_Hoh and @EstebanBustamante | can you please review this one.