540
Views
4
Comments
Solved
set different background color for alternate list items in mobile app
Question

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:

2016-12-06 13-57-03
Mauro Pinheiro
Solution

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.


2025-01-07 17-06-54
Paulo Cação
Champion

Mauro Pinheiro wrote:

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!

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

Best regards!

2025-01-07 17-06-54
Paulo Cação
Champion

Hi Venkata,

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

I hope its help you.

Regards


2016-12-06 13-57-03
Mauro Pinheiro
Solution

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.


2025-01-07 17-06-54
Paulo Cação
Champion

Mauro Pinheiro wrote:

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!

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

Best regards!

2021-03-18 21-03-15
Benjith Sam
 
MVP

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

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.