Solved

Custom Components inside Container Component are overlapping in Edit Mode

Forum|Forum|2 years ago
June 15, 2023
3 replies
2170 views

We have various custom components inside containers. For instance a container with posts. This is useful for adding items with multiple fields to a list. The issues we have with these components are in the edit mode. The components inside the container are overlapping and can only be selected in the Content Tree, but there the title shown is incorrect. This also means, that once the components were added they cannot be reordered easily.

Example with 3 Post Components inside the Post Container

When I look at the source in the browser, I can see the editable layer has inline styles to define the position and size of the element. They are identical for all the post components added in the container. Therefore they appear on top of each other and cannot easily be selected or reordered.

<div data-type="Editable" data-path="/content/edelweiss/language-masters/de/home/jobs/vacant-positions/jcr:content/root/container/container/posts_container/post_copy_338728060" role="link" tabindex="0" draggable="true" class="cq-Overlay cq-Overlay--component cq-draggable cq-droptarget is-selected is-active" title="Post component" style="position: absolute; top: 10px; left: 40px; width: 615.2px; height: 992.5px;"><span class="cq-Overlay--component-name">Post component</span><div class="editor-ResponsiveGrid-overlay-resizeHandle editor-ResponsiveGrid-overlay-resizeHandle--left" data-edge="left"></div><div class="editor-ResponsiveGrid-overlay-resizeHandle editor-ResponsiveGrid-overlay-resizeHandle--right" data-edge="right"></div></div>

Is there a way to modify the styles or to make the editable layer visible for each component? What am I missing?

Any helpful input is welcomed. Thanks!

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 EstebanBustamante

This usually happens when the component embedded has no decoration. Check these 2 things:

1. Your Posts container component has the cq:isContainer property set on its definition

2. If you are including the Post Component via HTL through sly-resource, you must make sure you are adding those in a div, not in a sly element.

Sady_Rifat

Community Advisor

Hello @monikafl ,

One of the easiest solutions can be to add a component title in the component HTML. Add the following tag on top of each component HTML code.
This will lead to some visible area for the components and authors can see & select each individual component.

<sly data-sly-test="${wcmmode.edit}">
    <div>${component.title}</div>
</sly>

M

MonikaFlAuthor

Hello @sady_rifat
Thanks for your input! In this case it does not really help. The title is already visible for all the components and in the content tree the titles are wrong, as it is repeating the title of only the first item for all the components in the container. But thanks anyways!

aanchal-sikka

Community Advisor

Hello @monikafl

Regarding container overlays:

Please make sure your html and sightly element syntax is proper.

I would suggest checking out with other OOTB components, I guess it would work as expected.

Next, start with a normal static HTML, then try to add your HTL piece-by-piece, see where it breaks. Remove any component specific clientlibs for a while

Aanchal Sikka

EstebanBustamante

Accepted solution

Community Advisor and Adobe Champion

This usually happens when the component embedded has no decoration. Check these 2 things:

1. Your Posts container component has the cq:isContainer property set on its definition

2. If you are including the Post Component via HTL through sly-resource, you must make sure you are adding those in a div, not in a sly element.

Esteban Bustamante

M

MonikaFlAuthor

Hi @estebanbustamante

Thanks for your input! This is indeed very helpful and in our case it's the second point you added that needs checking. For all the components that have this issue, we used we used an <li> tag instead of an <div> tag. I will need to change the output for edit mode to use a <div>.

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded