1153
Views
11
Comments
Solved
How to Change the color of specific even row in Table Record List
Question

Hi there, 

I can change the color of odd row (say it row 5th) of a table list using style property:

SyntaxEditor Code Snippet

"background-color:red  !important;"

Unfortunately, i cannot change the even rows. How to override the background color for specific rows?

thank you

Rank: #1022
Solution

Hi Random,

Well, you can achieve the desired Color. All you need to do is set the Cell Style in the table.

You will have to do this for all the cells in the Row.



I Hope that helps.


Thanks,

Waseema.

Rank: #82

Hi Made,

You can refer the below solutions accordingly :

Solution-1

Set the style attribute of the list-item like this:

Use the Mod function to give you the remainder of a division. Dividing current row numbers by 2, you will always get a 0 or 1 because this function returns an integer.

Using this logic you can set your list item background. 


Here an example (put this in the Attributes property):


If(Mod('yourlistname'.List.CurrentRowNumber,2)=1,"Background-color:red","Background-color:gray")


To follow the best practices, use CSS classes.

------------------------------------------------------------------------------

Solution-2

Just Add the below CSS in Screen Style Sheet:


.list-group div:nth-child(odd) {
    background-color : aliceblue;
}

.list-group div:nth-child(even) {
    background-color : cornsilk;
}

 

Check this Out - Demo Link

-------------------------------------------------------------------------------

In your case you can go via Solution-1, to set color of specific Even Number Row :)

Thanks

Rank: #218

Sorry, i mean table records, I cannot change the Even rows:

Rank: #218

I just want to change the specific even rows, not all. Say it only row 4 and 6.


Rank: #16868

Made,

You can add one boolean attribute in list structure. 

Populate that structure list with true values for specific rows (according to your need/logic) and then use below code in row extended properties of Table with 'style'- 

If('yourlistname'.List.Current.'yourobjectname'.'yourbooleanvalue' and Mod('yourlistname'.List.CurrentRowNumber,2) = 0,"Background-color:red","Background-color:gray")

Now, object with that boolean value true and with even rownumber will have background color as red and other rows will receive a gray bg color.

If you don't want to put any background color for other rows then simply put "".

This is very similar to assif's solution.

Hopefully this will solve your issue.


Thanks.

Rank: #218

I have used style, and it works only for odd rows, not even rows. 

Rank: #218

Why it does not work for Even rows?

thank you

Rank: #1022
Solution

Hi Random,

Well, you can achieve the desired Color. All you need to do is set the Cell Style in the table.

You will have to do this for all the cells in the Row.



I Hope that helps.


Thanks,

Waseema.

Rank: #218

Thank you gal,

U rock!

regards

mvp_badge
MVP
Rank: #5

Hi, 

I just found this question when searching to answer another one, and I would like to provide a solution that does not require applying the styles for each cell.

It is possible to style the background of a row, you just need to use the correct selectors.
For an example on how to that, see here: https://www.outsystems.com/forums/discussion/51000/how-to-add-color-in-table-record/#Post189430

Hope this helps anyone that finds this topic.

Cheers.