AEM - Unable to see edit option in component

Question

Here is the code I have written in HTL file footer.html I am using editable template here.

<div class="6u">
                            <div class="row collapse-at-2">
                            <sly data-sly-test="${footer.arr}">
                                <sly data-sly-repeat="${footer.arr}">
                                <sly data-sly-resource="${'column${itemList.index}'  @resourceType='aem-site/components/structure/footer/footerList'}"></sly>
                                </sly>
                            </sly>
                            </div>
                        </div>

and the footerList.html file has this piece of code (it is hardcoded for now but it's not the final code)

<div class="6u">
    <h3>Accumsan</h3>
    <ul class="alt">
        <li><a href="#">Nascetur nunc varius</a></li>
        <li><a href="#">Vis faucibus sed tempor</a></li>
        <li><a href="#">Massa amet lobortis vel</a></li>
        <li><a href="#">Nascetur nunc varius</a></li>
    </ul>
</div>

I have been facing some weird issues with editing the component. This is how the component looks like on the page:

I was expecting the footerList component to appear as two separate components containing one column each since the value of ${footer.arr} in footer.html is 2. But it is appearing like it's one component containing two column.

Another issue I am facing is that I am not getting an options to edit the component as shown in the image below:

That's how to components look in CRXDE

Please let me know if any further information is needed.

Answer 1

Your footerList components need to be included via a container component in order to be editable. You can either include them directly in the top level container (responsive grid in this case) or make your footer component a container (by extending the responsive grid - see Core Components Form Container)