Controls are unstable while doing layout

[Vani1012]

Hi

I am trying to rezise components using layout but the controls are unstable (jumping too much) and not very useful for editors.

Can anyone help me to fix this

[Vijayalakshmi_S · Accepted solution]

HI @Vani1012 

You can cross check on the below to narrow down the cause

• If it is reproducible in we-retail 
• if its reproducible in all your environments for your project content
• If it is project specific,
  • check if you have amended the grid.css and/or custom device options as part of emulator
  • check if you have console errors

[Craqdi]

Thanks for your comment, it's just what I was looking for.  

[BrianKasingli]

Hey, @Vani1012,

it might be becase your aemgrid.less and cq:responsive nodes are not setup properly, but...

You need to make sure your AEM grid is configured as expected, along with the device groups and emulators. Take a look at this blog article to see how it is being setup. AEM: Customize emulators in layout mode | by Theo Pendle | Level Up Coding (gitconnected.com)

In my opinion, you would need to get the aem-grid CSS configured, the configuration that include @import (once) "/libs/wcm/foundation/clientlibs/grid/grid_base.less".

Next, you would need to add cq:responsive node on the "template-type" and "templates", with the same CSS names as the node names declared on the aem-grid,less file. VERY IMPORTANT!!!

After that, you would need to configure the some jcr:content nodes from the project to enablecq:deviceGroups... finally enable your mobile emulator via com.day.cq.wcm.mobile.core.impl.MobileEmulatorProvider~my-site.cfg.json

Again, you should find all steps found here AEM: Customize emulators in layout mode | by Theo Pendle | Level Up Coding (gitconnected.com)

[Love_Sharma]

Try to check if targeted component width you are trying to set, is that value going greater than column width of Layout container. If yes, logically child should not have more width than parent (one of the observation I had when working on similar issue).