Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

Unable to add components above custom editbar's

Avatar

Level 2

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?

1 Accepted Solution

Avatar

Correct answer by
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 :).

View solution in original post

0 Replies

Avatar

Level 4

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

Avatar

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.

Avatar

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

Avatar

Correct answer by
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 :).

Avatar

Administrator

Thanks for sharing the Solution.

~kautuk