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?
Solved! Go to Solution.
Views
Replies
Total Likes
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 :).
Views
Replies
Total Likes
In your modification, did you remove code that lets components to be dropped?
Views
Replies
Total Likes
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.
Views
Replies
Total Likes
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
Views
Replies
Total Likes
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 :).
Views
Replies
Total Likes
Thanks for sharing the Solution.
~kautuk
Views
Replies
Total Likes
Welcome Kautuk
Views
Replies
Total Likes
Views
Likes
Replies