Jump to content
Robin S

Adding classes to Repeater items for custom styling in admin

Recommended Posts

In a current project I am using a Repeater field to build a kind of pseudo-table, where each Repeater item is a row. Some of the rows are headers, and some have buttons that toggle corresponding checkbox fields in a hidden FormBuilder form.

The problem was that when the Repeater items were collapsed I couldn't see which rows were headers and which contained buttons.


I tried including the fields in the Repeater labels but it still didn't provide enough visual difference to be quickly recognisable. So I investigated how classes could be added to selected Repeater items in admin depending on the value of fields within the Repeater items. This is what I ended up with...

In /site/ready.php

// Add classes to selected service row Repeater items
$this->addHookAfter('InputfieldFieldset::render', function(HookEvent $event) {
    /* @var $fieldset InputfieldFieldset */
    $fieldset = $event->object;
    $attr = $fieldset->wrapAttr();
    // Fieldsets in a Repeater inputfield have a data-page attribute
    if(isset($attr['data-page'])) {
        // Get the Repeater item
        $p = $this->pages((int) $attr['data-page']);
        // Check field values and add classes accordingly
        // If item is a header
        if($p->row_type && $p->row_type->id == 2) {
        // If item has a checkbox button
        if($p->fb_field) {

In admin-custom.css (via AdminCustomFiles)

/* Special repeater rows */
.Inputfield_service_rows .header-row > label { background:#29a5aa !important; }
.Inputfield_service_rows .has-checkbox > label .InputfieldRepeaterItemLabel:before { font-family:'FontAwesome'; color:#73cc31; content:"\f058"; display:inline-block; margin-right:6px; }




  • Like 13

Share this post

Link to post
Share on other sites

This rules, Robin!

i am using it for a similar case where the select field in the repeater should be highlighted if selected.
(later on three highlights are shown in a teaser)

if($p->techhighlight == 1) {


  • Like 3

Share this post

Link to post
Share on other sites

Nice tutorial but there is a small issue. Pressing the trash icon in the items we modified the color doesn't turn it to red and this might result in confusion for non-superusers.

Share this post

Link to post
Share on other sites

I fixed it. @Robin S update the css rule with this:

.Inputfield_service_rows .header-row > label:not(.ui-state-error) { background:#29a5aa !important; }


  • Like 2

Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Create New...