Layout re-sizing shows weird behavior.

[muqaddam90]

Hello community,

I'm working on aem 6.4, and even though layout mode works and I'm able to re size images and components, resizing shows a weird behavior in wich sometimes it resize the images or components not at the expected column size, or some times it does not re size's them, and it takes several tries to achieve the desired size. This happens in all the pages and with all components. Any idea what may be causing this?

[smacdonald2008]

Looks like a CSS issue. What CSS are you using? Did you follow the instructions listed in the Weekend Tutorial -- Getting Started with AEM Sites - WKND Tutorial

[muqaddam90]

Are you talking about grid_base.less file? , I'm migrating from 6.2 with the same css files, this issue was not present on that version of aem. Sorry I don't know if the tutorial was followed for this, I just see it working right on 6.2.

[Gaurav-Behl]

Could you share video/gif/screenshot of the mentioned behavior?

[muqaddam90]

Here is a link to download the video, layout.mp4 - Google Drive  this happens for mobile, tablet, and desktop.

Thanks for your answers.

[ammoraleso]

Hi,

yes i have the same issue please tell me if you can resolve it.

[Gaurav-Behl]

I'm not sure if this is actually a bug or something related to your custom less/css files of the project. It would be difficult to debug your custom code to find the actual root cause. Just keep in mind that the child containers/components would have an impact if the standard coding conventions are not followed.

In your video, it doesn't drag to the extreme right side and leave offsets on left probably because of how your less/css classes are structured w.r.t. to layout container's responsiveness (including margins/padding, float etc.) which is grid.less and others.

For responsive layout concepts, this might help you to debug further - Adobe Experience Manager Help | Understanding Responsive Layout with AEM Sites 

[muqaddam90]

Were there any changes in the way the styles or the grid are configured between 6.2 and 6.4? Because it works perfectly in 6.2 with the same styles, also I'm seeing some parameters empty when the resizing doesn't work, "ns" it's always undefined in core.js everytime the issue happens, so functions like "ns.responsive.getCurrentBreakpoint()" are undefined and from there to the bottom most of the parameters related to breakpoints get set also as undefined unlike when the resizing works correctly, in those cases the parameters are defined, could this be related and if so, how can I approach for a solution?

Thanks for your answers.

[Gaurav-Behl · Accepted solution]

Were there any changes in the way the styles or the grid are configured between 6.2 and 6.4? - Check with DayCare on this one. I would like to say yes but I'm not aware of specifics in this context.

From a solution viewpoint, my recommendation would be to check We-retail/WKND reference sites that are available OOB so that you can isolate your code related issues vs AEM issues, if any. Validate if that behavior exists in reference implementation otherwise how is it handled? You just need a front-end developer to debug/find out root cause of the behavior.

In addition to that, create a new page from your template and test this behavior with single text component only on that page and understand the dynamics between parent layout container, your text component and the custom styles that you have coded. That ways you could rule out any interference of multiple components/containers.

HTH

[muqaddam90]

Hello community, just in case someone runs into a similar problem, I found the solution.

For our project we had a custom layout container component overlaying aem component /libs/wcm/foundation/components/responsivegrid/responsivegrid.html, what changed from 6.2 to 6.4 is the responsive api

<div data-sly-use.api="com.day.cq.wcm.foundation.ResponsiveGrid"

6.4 now uses 
<div data-sly-use.api="com.day.cq.wcm.foundation.model.responsivegrid.ResponsiveGrid"

Updating it fixed the issue.