Expand my Community achievements bar.

Enhance your AEM Assets & Boost Your Development: [AEM Gems | June 19, 2024] Improving the Developer Experience with New APIs and Events
SOLVED

Layout container [root] Overlapping all other components, making them disabled to edit

Avatar

Level 2

When configured one specific component on the page, I see that Layout container [root] overlapping all other components above the specific component making other components disable to edit.

 

Please help to debug and resolve this issue.

1 Accepted Solution

Avatar

Correct answer by
Employee Advisor

Can you add below snippet in your components html at the end and test:

 

<div style="clear:both"></div>

View solution in original post

3 Replies

Avatar

Employee Advisor

Following might be the reason for overlap and surely caused by custom code :
A custom css written at page/component which override the default editing behaviour ad getting applied in all modes, possible fixes:
1. Trace out the culprit css and find out better replacement of the snippet.

2. Write a custom CSS which only applies in edit mode and overrides the over-lapping behaviour.

 

Thanks,

Milind

Avatar

Level 2

Yes I agree that it has something to with custom code of the component. I am trying to figure out which style property would cause this issue, as based on that style the height attribute of layout container is coming wrong. Coral is getting confused.

Avatar

Correct answer by
Employee Advisor

Can you add below snippet in your components html at the end and test:

 

<div style="clear:both"></div>