Expand my Community achievements bar.

SOLVED

Issues with ResponsiveGrid 'gridClassNames' after migrating from 6.5.7 to 6.5.10

Avatar

Level 1

Hello,

 

We recently began the process of upgrading our AEM instances from 6.5.7 to 6.5.10.

 

After performing the upgrade we have encountered an issue with our Container components (which utilize the ResponsiveGrid class for setting CSS classes based on Layout mode authoring) where they are printing the wrong classes to the DOM elements.

 

For instance, in our current 6.5.7 environment the gridClassNames for a particular container come back as "aem-Grid aem-Grid--default--4 aem-Grid--tablet--4 aem-Grid--phone--4". The same configuration in 6.5.10 though is producing this string for gridClassNames: "aem-Grid aem-Grid--8 aem-Grid--tablet--4 aem-Grid--default--4 aem-Grid--phone--12".

 

There are two distinct differences; the odd change of the phone value to "--12" being one, but more importantly for our current issue is the addition of the "aem-Grid--8" class. This class is causing display issues on child elements because it is setting the width to much smaller percentage values than they should be and subsequently "breaks" our design.

 

I've attempted to debug this issue by looking at the decompiled ResponsiveGrid.class file in my IDE, but I cannot figure out why this "aem-Grid--8" class is being added.

 

Based on my testing this issue appears to have started with 6.5.9 and in the release notes for that version it does mention "fixes" related to the way nested containers are handled, and there are definitely significant changes to the ResponsiveGrid and ResponsiveGridUtils classes versus 6.5.7.

 

But as the issue persists through 6.5.10 and now 6.5.11 I can't help but wonder if this is now "working as expected" and we need to adjust the way we've authored our Containers (with particular respect to nesting)?

 

Has anyone else encountered similar issues with their Layout Container components or other components utilizing the ResponsiveGrid class?

 

Thanks,

Tyler

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

For editable templates, please make sure the cq:responsive/breakpoints node is setup propertly so for example 

  1. /conf/my-site/settings/wcm/template-types/page/structure/jcr:content/cq:responsive/breakpoints/small
    1. produces aem-Grid--small--4
  2. /conf/my-site/settings/wcm/template-types/page/structure/jcr:content/cq:responsive/breakpoints/medium
    1. produces aem-Grid--medium--4
  3. /conf/my-site/settings/wcm/template-types/page/structure/jcr:content/cq:responsive/breakpoints/large
    1. produces aem-Grid--large--4

View solution in original post

1 Reply

Avatar

Correct answer by
Community Advisor

For editable templates, please make sure the cq:responsive/breakpoints node is setup propertly so for example 

  1. /conf/my-site/settings/wcm/template-types/page/structure/jcr:content/cq:responsive/breakpoints/small
    1. produces aem-Grid--small--4
  2. /conf/my-site/settings/wcm/template-types/page/structure/jcr:content/cq:responsive/breakpoints/medium
    1. produces aem-Grid--medium--4
  3. /conf/my-site/settings/wcm/template-types/page/structure/jcr:content/cq:responsive/breakpoints/large
    1. produces aem-Grid--large--4