How to change the background color of list records for odd rows

Hi,

I am trying to change the background color for odd rows in list records. I am not finding a way. Can any one help me in this. I tried different options which is in Table Records we have odd line even line to change the css but in list records we don't have that and I tried to use this property

.ListRecords div:nth-child(odd){

}

but when I am selecting div it is considering the inner elements also.

Paulo Cação wrote:

Hi, check if can help you:

https://www.outsystems.com/forums/discussion/28097/styling-tables-with-rows-in-different-shades/

https://www.outsystems.com/forums/discussion/18081/change-the-color-of-a-row-in-a-table/#Post69471


Regards

Hi, 

Thank you for the reply but here I am using List Records not Table Records. In List Records I don't have tr,td elements.

Regards,

Trinusha. 


Ah ok, Im sry. I'm going to remove the comment so as not to generate any mistakes.

Are you try using in mobile?

Solution

trinusha karumanchi wrote:

Hi,

I am trying to change the background color for odd rows in list records. I am not finding a way. Can any one help me in this. I tried different options which is in Table Records we have odd line even line to change the css but in list records we don't have that and I tried to use this property

.ListRecords div:nth-child(odd){

}

but when I am selecting div it is considering the inner elements also.

You can group the list elements at one Container and at Extended Proprieties, use style tag and use that "logic"

If(Mod(ListRecords1.List.CurrentRowNumber,2)<>0,"background:red;","background:blue;")


this is the output:



Hope i could help,

Pedro Vila Nova

Solution

Hi Pedro,

Thank You so much :). It's working.

Regards,

Trinusha.


You welcome =)

Hi,

I have one more doubt. I am working on a popup. In the popup, I have fixed header and footer and in the main container I placed two containers. My issue is I want to hide the second container and decrease the height of the popup when I click on the button in the footer. I understood how to hide the second container by clicking on the button but I am unable to decrease the height of the mainContainer.