Expand my Community achievements bar.

Guidelines for the Responsible Use of Generative AI in the Experience Cloud Community.
SOLVED

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

Avatar

Level 10

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:

    container1.png

     

  3. Add another Layout Container into container1

    container2.png

  4. Add a Title into container2: 

    title.png

     

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:

 

Containercq:responsiveExpectedActual
rootwidth=66 of 12 columns6 of 12 columns
container1none6 of 12 columns (inherited from parent)6 of 12 columns (inherited from parent)
container2none6 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
Topics

Topics help categorize Community content and increase your ability to discover relevant content.

1 Accepted Solution

Avatar

Correct answer by
Community Advisor
2 Replies

Avatar

Correct answer by
Community Advisor