set different background color for alternate list items in mobile app

Hi,

Can anyone help me how can i set a different background color for alternate list items in a mobile application to display something like below:

Hi Venkata,

You can did this using CSS, like this: https://jsfiddle.net/paulocesar06/mvj9bufg/5/

I hope its help you.

Regards

Another option is set the style attribute of the listItem 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 Attibutes property):

SyntaxEditor Code Snippet

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

To follow the best practises, use CSS classes.

Regards.

Hi Venkata,

To set the List Widget with alternative background color List Item for mobile application.

Just Add the below CSS in Screen Style Sheet:

SyntaxEditor Code Snippet

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

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

Check this Out - Demo Link

Hope it helps.

Kind Regards,

Benjith Sam

Mauro Pinheiro wrote:

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

Hi!

I think that you will have a greater performance only using CSS. But it's works :)

Best regards!