Add CSS property to first item in repeater

Discussion Ask a question
, , ,
1

Hello,
Question:
How can I add a CSS property to the first item of the repeater? The CSS property I want to add is border-top: 1px solid green;
Product:
Wix Studio

What are you trying to achieve:
I am trying to add a border-top property to the first item of the Repeater.

What have you already tried:
I have already tried the :first property with CSS but then noticed that all the items of the repeater have the same ID, and using a class will not work.

I am trying to execute this code but it is not working:

$w.onReady(function () {

const repeater = $w('#repeater1');

 repeater.onItemReady(($item, itemData, index) => {    
    console.log('Inside onItemReady callback'); // Check if this console log appears

        if (index === 0) {
            $item('#box99').style['border-top'] = '1px solid green';
        }
    });

    console.log('Outside onItemReady callback'); // Check if this console log appears


});

Additional information:
image
Repeater is #repeater1 and the item is #box98

Thanks a lot!

2

style only has the 3 properties listed here: style - Velo API Reference - Wix.com

This can’t be set the way you want it from Velo but could set a full border (rather than border top).

Also if your Repeater has its data bound via the UI then the onItemReady won’t be defined before the Repeater’s data populates. In this case you’d want to either to define the onItemReady and then set the Repeater’s .data property in code OR use forEachItem that will make sure it executes on the existing data bound to the Repeater.