Drag and Drop button image on Sortable Repeatable Group

[ghicar]

Version Fabrik 4(Epsilon)

When you configure a repeatable group to be sortable via drag & drop, the button used to drag a row in the form edit is a bar chart icon. Is it possible to configure something else?

 

[troester]

There's no option.
But you can create a custom template.
It's in the form template components\com_fabrik\views\form\tmpl\bootstrap\default_repeatgroup_row.php line 21

 

[juuser]

Or alternative approach which is working at least in F3 (not tested with F4).

Just add:

.icon-bars::before {
content: "\e00e" !important;
cursor: move;
}

in your template's custom css file to get an up-down arrow:

PS. Would be great if the fix could be added to the core code for next release

 

[troester]

PS. Would be great if the fix could be added to the core code for next release

Done

Changed icon-bars to icon-menu-2 in default_repeatgroup_row and added cusor:move in template_css.php
@gihar: You can modify these files directly they will be overridden with the same code after an update (so no need for custom template or CSS)

 

[ghicar]

Many thanks for the replies.

Can confirm that juuser suggestion of a template custom.css edit works, using the fontawesome 5 code for icon-sort. ie

.icon-bars::before {
content: "\f0dc" !important;
cursor: move;
}

Alternatively, editing the file I was directed to by troester, to change the icon from icon-bars, to icon-sort also shows the sort icon.

<?php
if ($group->canOrder) :
?>
<td><?php echo FabrikHelperHTML::icon('icon-sort'); ?></td>
<?php


I have not tried creating a custom template. It would be good to have a better icon in a future release, for now I will go with the templates custom.css fix.

 

[ghicar]

Apologies, just seen the update from Troester, have reverted custom changes and applied the following changes as suggested which work:

default_repeatgroup_row.php line 21 - <td><?php echo FabrikHelperHTML::icon('icon-menu-2'); ?></td>

template_css.php, added after line 25:

.icon-menu-2::before {
cursor: move;
}​

many thanks for the assistance