Row repeat background stripe

Wappler General How To
#1

hi

I am trying to tripe the row background color in a row repeat, is this possible? I can’t seem to get it to work.

I tried class toggle, but there appears to be a bug in that if you add a 2nd class toggle it blanks the first (seems to be a know bug reported by Ben in wappler 4).

how can i stripe the row background like the stipe table (I dont want to use the table)

also, i think a bug, i have set the row bottom border to 1px with a color on the repeating row, but, i ONLY get 1 border on the last row, not each row.

thanks

#2

You can add background to a row by using a dynamic class. This can be found in dynamic attributes > styling > class toggle.

Please post your exact code, as it’s not really clear what exactly are you doing.

#3

hi Teodor

is there any guide on using the dynamic class toggle? i added a dynamic toggle with style and set to 1==1, i then tried to add a second dynamic class toggle and it blanked out the frst.

the row bordrer, hopefully the screenshot makes it clear, i have a repeat row. on that repeat row i set border-bottom to 1px and set a colour. i have multiple rows, but only get 1 border, on the bottom row, not each row

aaa
aaa802×622 30.1 KB

thanks

#4

bbbb
bbbb2846×362 26.7 KB

#5

No it’s not really clear. Please post the code. Pasting the code is the easiest way to get answer, as we can inspect it.

Not sure what you mean here? You can have as many classes as you wish:

Screenshot 2024-04-19 at 10.42.44
Screenshot 2024-04-19 at 10.42.44383×554 8.15 KB

#6

please try on repeat row. i add 2 dynamic toggle, i add style17 and numbr 1. i click my 2nd toggle, enter style18 and it change 1st toggle, on a row repeat it does not seem to work, i can post vide if that helps

#7

Yes, please post a video, as i am not sure i understand what you are doing.

Still waiting for the code of:

And also please keep different questions in separate topics in the future.

#8 
<div class="row align-items-center small border-bottom border-1 border-primary-subtle pt-3" is="dmx-repeat" id="repeat1" dmx-bind:repeat="SC_StatementSel.data.query_StatementSel" dmx-class:syle17="1" dmx-class:style18="2">
#9

You have applied the border bottom to the row and your row has a repeat children applied.
So on your page you have one row only, which repeats its children elements (cols inside it). That is why you see one border at the bottom as you are not repeating the row itself, but the child elements inside it.

#10

ah ok, that makes sense now, so best to stick another row in the repeat row, thanks, i thought it repeated the row as well as its contents, thanks

#11

and sorry for 2 questions in one post.

#12

No you better not nest another row inside the row. You are not supposed to nest rows, as explained in Bootstrap docs, rows are simply wrappers for columns.
You can repeat the row itself if you like OR you can add the border to a col inside the row.

1 Like