Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

AEM Grid Resizing Issue

v1101
Level 5
Level 5

Hi All - I am running into issues with AEM Grid. I have configured the required config for AEM grid but when I refresh the page after the resizing, the resized layout is not persisting.
This is happening in Editable template and AEM version is 6.5. I have configured the below. Can someone tell me what could be the issue.

 

com.day.cq.wcm.mobile.core.impl.MobileEmulatorProvider - Added the page component.
Included the grid.less(Clientlib) in the template page policy (head) and also in the page component as well.
Added the device group property(cq:deviceGroups) in the jcr:content as well
The resized layouting breakpoints offset/width values are captured in the jcr as expected but when I refresh the page, the offset values are not changed that is expected but the layouting is not reflected in the page.
Also verified the nodes in the editable template and it has the cq:responsive node as well.

1 Accepted Solution
Vijayalakshmi_S
Correct answer by
Community Advisor
Community Advisor

Hi @v1101,

Can you confirm if you have amended anything in grid.less file (on top of one that comes OOTB with AEM maven archetype project)

As a final try to narrow down,

  • Create a new maven archetype project in your local instance and observe the behavior 
  • Check the behavior in we-retail site

View solution in original post

3 Replies
Vijayalakshmi_S
Correct answer by
Community Advisor
Community Advisor

Hi @v1101,

Can you confirm if you have amended anything in grid.less file (on top of one that comes OOTB with AEM maven archetype project)

As a final try to narrow down,

  • Create a new maven archetype project in your local instance and observe the behavior 
  • Check the behavior in we-retail site

View solution in original post

v1101
Level 5
Level 5
@Vijayalakshmi_S - I have included the grid.less clientlib in the template. I could verify that the clientlib is loading. is loading
Vijayalakshmi_S
Community Advisor
Community Advisor

Shared grid.less file looks fine (same as the one that comes OOTB with AEM maven archetype project). I would like to iterate that as a final try to narrow down the cause of the issue, check we-retail site pages or create new maven archetype project. (This will help decide if its project specific or at instance level issue. If its former case, we can then dig down if there any other project specific CSS which is overriding/impacting)

v1101
Level 5
Level 5
@Vijayalakshmi_S - Thanks for your inputs. I have verified other projects in the same instance and I could replicate the same issue. Since we don't have any sample project on this environment, so I couldn't test we-retail site.
Vijayalakshmi_S
Community Advisor
Community Advisor

Noted. In that case see if the below debug route helps.

  • Inspect the Sources section of Developer tools for list of all CSS files loaded as part of it in the target instance Or
  • Select any specific project(out of al problematic project where issue exist) and install the same in lower environment or in your local and observe the behavior
v1101
Level 5
Level 5
@Vijayalakshmi_S - Thanks for all your suggestions. Appreciate it. Will check further on this.
Ankur_Khare
Community Advisor
Community Advisor

This is due to grid.less file not registered in your clientlib folder.

Please add grid.less in ur css.txt of the base clientlib folder and check in your page view source if grid.less is getting injected or not.

v1101
Level 5
Level 5
@Ankur_Khare - grid.less is already loading and it is getting inject. Not sure why the resizing is happening and after the page refresh everything is gone with respect to the resizing.
v1101
Level 5
Level 5
@Ankur_Khare - PFB. @Import (once) "/libs/wcm/foundation/clientlibs/grid/grid_base.less"; /* maximum amount of grid cells to be provided */ @max_col: 12; /* default breakpoint */ .aem-Grid { .generate-grid(default, @max_col); } /* phone breakpoint */ @media (max-width: 650px) { .aem-Grid { .generate-grid(phone, @max_col); } } /* tablet breakpoint */ @media (min-width: 651px) and (max-width: 1200px) { .aem-Grid { .generate-grid(tablet, @max_col); } }