Showing an element when $index even or odd

Wappler General How To
#1

A bit of an odd situation (pun intended), but I have a repeat that works similar to striped rows, so every second row has a background colour assigned.

I used the following to get it working, create a repeat region, add a dmx-show to the element of

dmx-show="(($index % 2) == 0)"

Would anyone say this is a bad way of doing it as it is working using modulus and I always know that $index is an unsigned int, so I do not think there could be a situation this would not work for. Any comments for improvement, or possible issues please let me know.

#2

Dynamic bindings with calculations should be kept to a minimum if its a large page… Specially in repeats.

For your case, setting a CSS class on top level tag with even / odd selector should be enough. No need for dmx.

You should be able to use this if its not a table body that is being repeated.

#3

Thanks @sid, let me give css another try, as I did attempt that as my first plan, however although I said it’s just a background colour, that was a little simplified, it is actually a bunch of elements that need to show or hide based upon even or odd rows.
So at the top there is a background image, and at the bottom too, and then the content inside that needs a solid colour matching the svgs used for the background images.
Now that I managed to achieve with pure css, where I ran into an issue was with making every odd container container-fluid and every even a normal fixed width one. After a few hours I gave up and tried this.
Luckily it’s only about 4 items in the repeat, and should never get to more than say 10 at the most.

Can you think of any way to make each even or odd container fluid with pure css, it’s not really my strong point, so would be interested if you have a solution for that.

#4

If you could share a link, i could experiment on the dev tools.
Container fluid is another bunch of css wrapped in a class… So you will have to replicate all those, theoretically.

If its just 10 items, using dmx is no harm. Provided you dont have another 10 repeats on the page with 10 items each. :sweat_smile:

1 Like
#5

Bahahaha, very true, will PM you a link. thank you.