How to Change the color of specific even row in Table Record List

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

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

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

Just Add the below CSS in Screen Style Sheet:

Ref from Solution : https://www.outsystems.com/forums/discussion/28097/styling-tables-with-rows-in-different-shades/ of Pankaj

.

.TableRecords tbody tr:nth-child(odd)  {

background: grey;  /*whatever color you want*/

}

.TableRecords tbody tr:nth-child(even)  {

background: white;  /*whatever color you want*/

}

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

Again you can also use this referred by outsystem:

The Table Records widget has two properties Odd Line Style and Even Line Style that allow you to specify CSS classes to be applied to the odd and even rows.

By default they come with the predefined classes TableRecords_OddLine and TableRecords_EvenLine respectively, but you can either add more classes to the properties, remove these and add your own or even override the definition of these classes on the stylesheet for your screen, for instance.



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


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.

Made wrote:

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


In this case, you have to write the style in extended property of the row.



in double Quotes put the condition css

If(searchResultsTr.List.CurrentRowNumber = 4 ,"background:red",
If(searchResultsTr.List.CurrentRowNumber = 6 ,"background:red"
,""))



Regards,

Pankaj

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

Why it does not work for Even rows?

thank you

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.

Solution

Thank you gal,

U rock!

regards

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.