Unable to add components above custom editbar's | Community

Level 2

Solved

Unable to add components above custom editbar's

Forum|Forum|9 years ago
July 15, 2016
6 replies
2194 views

Hi all,

I have created a sightly column-control by extending the OOTB column control component which uses editbar for start and end of component.

but now i am not able to drag and drop any other component above this column control component.

I used OOTB column control component which also uses editbar and tried to place a component above it and i am able to do that.

can any one help on this please?

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 VivekArya7

Hey Guys, got the solution finally :).

i found out that it was because i didn't include "insert" action in editbar, so because of that i was not able to place any other component above or below it.

@steve cave thanks for helping sir :).

Level 4

In your modification, did you remove code that lets components to be dropped?

VivekArya7Author

Level 2

yes kind of... i needed to build column control using sightly... so i used OOTB column control written in JSP, since there is no column control OOTB component in sightly... and replaced JSP code with HTML code.

VivekArya7Author

Level 2

column-control code:

<div class="row">
<sly data-sly-test="${properties.columnlayout == 'twoColumns(50%-50%)' || properties.columnlayout == null}">
<div class="col-md-6 col-xs-12"><sly data-sly-resource="${'column-1' @ resourceType='wcm/foundation/components/parsys'}"/></div>
<div class="col-md-6 col-xs-12"><sly data-sly-resource="${'column-2' @ resourceType='wcm/foundation/components/parsys'}"/></div>
</sly>
<sly data-sly-test="${properties.columnlayout == 'twoColumns(70%-30%)'}">
<div class="col-xs-8" ><sly data-sly-resource="${'column-1' @ resourceType='wcm/foundation/components/parsys'}"/></div>
<div class="col-xs-4"><sly data-sly-resource="${'column-2' @ resourceType='wcm/foundation/components/parsys'}"/></div>
</sly>
<sly data-sly-test="${properties.columnlayout == 'twoColumns(30%-70%)'}">
<div class="col-xs-4"><sly data-sly-resource="${'column-1' @ resourceType='wcm/foundation/components/parsys'}"/></div>
<div class="col-xs-8"><sly data-sly-resource="${'column-2' @ resourceType='wcm/foundation/components/parsys'}"/></div>
</sly>
<sly data-sly-test="${properties.columnlayout == 'threeColumns'}">
<div class="col-md-4 col-xs-12"><sly data-sly-resource="${'column-1' @ resourceType='wcm/foundation/components/parsys'}"/></div>
<div class="col-md-4 col-xs-12"><sly data-sly-resource="${'column-2' @ resourceType='wcm/foundation/components/parsys'}"/></div>
<div class="col-md-4 col-xs-12"><sly data-sly-resource="${'column-3' @ resourceType='wcm/foundation/components/parsys'}"/></div>
</sly>
<sly data-sly-test="${properties.columnlayout == 'fourColumns'}">
<div class="col-md-3 col-xs-6"><sly data-sly-resource="${'column-1' @ resourceType='wcm/foundation/components/parsys'}"/></div>
<div class="col-md-3 col-xs-6"><sly data-sly-resource="${'column-2' @ resourceType='wcm/foundation/components/parsys'}"/></div>
<div class="col-md-3 col-xs-6"><sly data-sly-resource="${'column-3' @ resourceType='wcm/foundation/components/parsys'}"/></div>
<div class="col-md-3 col-xs-6"><sly data-sly-resource="${'column-4' @ resourceType='wcm/foundation/components/parsys'}"/></div>
</sly>
</div>

<div data-sly-resource="${'colctrl-end' @ resourceType='fridays-www/components/content/columncontrol/endbar'}"></div>

- In above code, column layout options are populated through a JSON file

VivekArya7AuthorAccepted solution

Level 2

Hey Guys, got the solution finally :).

i found out that it was because i didn't include "insert" action in editbar, so because of that i was not able to place any other component above or below it.

@steve cave thanks for helping sir :).

Community Manager

Community Manager

Thanks for sharing the Solution.

~kautuk

Kautuk Sahni

VivekArya7Author

Level 2

Welcome Kautuk