Unable to add components above custom editbar's | Community
Skip to main content
V
VivekArya7
New Participant
July 15, 2016
Solved

Unable to add components above custom editbar's

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

6 replies

V
VivekArya7Author
New Participant
July 20, 2016

Welcome Kautuk

kautuk_sahni
kautuk_sahni
Employee
July 20, 2016

Thanks for sharing the Solution.

~kautuk

Kautuk Sahni
V
VivekArya7AuthorAccepted solution
New Participant
July 20, 2016

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

V
VivekArya7Author
New Participant
July 18, 2016

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

V
VivekArya7Author
New Participant
July 18, 2016

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.

S
stevec2515680
New Participant
July 16, 2016

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

Terms & ConditionsAccessibility statement

Loading footer...