316
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:

Rank: #18822
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.


Rank: #215

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!

Rank: #215

Hi Venkata,

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

I hope its help you.

Regards


Rank: #18822
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.


Rank: #215

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!

mvp_badge
MVP
Rank: #75

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