Layout re-sizing shows weird behavior. | Community
Skip to main content
muqaddam90
muqaddam90
February 1, 2019
Solved

Layout re-sizing shows weird behavior.

  • February 1, 2019
  • 9 replies
  • 3875 views

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?

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by Gaurav-Behl

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

9 replies

smacdonald2008
smacdonald2008
February 1, 2019

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
muqaddam90Author
February 1, 2019

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
Gaurav-Behl
February 1, 2019

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

muqaddam90
muqaddam90Author
February 1, 2019

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

Thanks for your answers.

A
ammoraleso
February 1, 2019

Hi,

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

Gaurav-Behl
Gaurav-Behl
February 1, 2019

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
muqaddam90Author
February 2, 2019

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
Gaurav-BehlAccepted solution
February 2, 2019

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
muqaddam90Author
February 19, 2019

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.

Terms & ConditionsAccessibility statement

Loading footer...