Expand my Community achievements bar.

width changing issue in core container

Avatar

Level 4

Created Parent container with responsive Grid option enabled.

created a new conainerA inside it. changed width to 5 and offset to 0 by dragging the layout handle.

copied and pasted the same container in parent container with name containerB. on changing the containerB width using either left/right causing the container to jump to new line. offset getting value which is equal to width of containerA (space added if any there) and width = width of containerB

 

 

  •  created a parent Layout Container with Responsive Grid enabled

  • Inside that:

    • Added Container A → set width = 5

    • Copied it → got Container B (also width = 5)

    • Now both sit inline = total width: 5 + 5 = 10

Problem:

When i try to drag Container B right by 1 column (to leave space between the two):

  • It jumps to the next line

  • Instead of setting offset = 1, AEM sets offset = 6
    ➤ Which pushes it beyond the available 12-column grid → wraps to new row

 

what to do for getting inline even after copy pasting container?

4 Replies

Avatar

Level 4

Hi @AliSyed1 ,

 

As far as I understand the problem, the issue can occur when you copy and paste a container in a responsive layout. AEM also copies its layout metadata, including the grid position.
This causes incorrect offset values when you try to move it, making the container jump to the next line.

 

You can try this: after pasting the container, go to CRX/DE and delete the layout node inside containerB. Now go back to AEM Layout Mode, and when you drag and resize, it will behave properly and stay inline.


Let me know if this works or not.

Thanks.

Avatar

Community Advisor

Hi @AliSyed1 ,

Can you check grid.less file 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.

Also, check if grid.less is already there and you have not amended anything in grid.less file.

As a final troubleshooting steps:-

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

 

-Tarun

Avatar

Community Advisor

Hi @AliSyed1 

Are you seeing observing this behaviour only with copy pasting or with drag drop also having issue with layout?

For me it looks good, with container type responsive

arunpatidar_0-1747133474097.png

 

Arun Patidar

AEM LinksLinkedIn

Avatar

Administrator

Hi @AliSyed1,

Did you find the suggestion helpful? If yes, kindly consider marking the most suitable answer as ‘correct’.

If you’re still facing any challenges, please feel free to continue the conversation here. We’re happy to support further