Unable to add components above custom editbar's

[VivekArya]

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?

[stevec2515680]

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

[VivekArya]

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.

[VivekArya]

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

[VivekArya · Accepted solution]

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 :).

[kautuk_sahni]

Thanks for sharing the Solution.

~kautuk

[VivekArya]

Welcome Kautuk