Can I give odd and even list items a different color?

This forum contains topics that were moved from Get Satisfaction
Koning Voetbal
Posts: 0
Joined: Thu Feb 27, 2014 2:21 pm

Can I give odd and even list items a different color?

Post by Koning Voetbal »

Hi,

I have a list

Image

There are two ways to change the visibility of the different items looks better:

1.
Give the odd and even list items a different color. This can be done in CSS like this:

li {
color: blue;
}
li:nth-child(odd) {
color: green;
}
li:nth-child(even) {
color: red;
}

Is it possible to use this CSS code with Appery? Or is there another way to achieve this?

2.
Make some padding between the list items. I try to give the list and the list item some padding but still they are against each other.
Is there a way to make some padding between the list items?

Kind regards,

Arie

Evgene Karachevtsev
Posts: 12
Joined: Mon Apr 28, 2014 1:12 pm

Can I give odd and even list items a different color?

Post by Evgene Karachevtsev »

Koning,

1) You should add weight to the selectors, for example
pre[name=mobilelistName] li:nth-child(odd) a.ui-btn{
color: green;
}
[name=mobilelistName] li:nth-child(even) a.ui-btn{
color: red;
} /pre
2) Please try this way:
pre[name=mobilelistName] li{
margin-bottom: 4px;
}/pre

Koning Voetbal
Posts: 0
Joined: Thu Feb 27, 2014 2:21 pm

Can I give odd and even list items a different color?

Post by Koning Voetbal »

Hi Evgene,

Tnx for the quick answer, it's working almost good .......... ;-)

I realize that I have only one list item which is placed inside a array.

If i use your CSS code, nothing happens because every list item is like an odd.

I have put a test list under the excisting list to show you what's the problem, both lists are using the same CSS code, except fot the naming ofcourse.

As you can see, the test list is showing correctly but the other list doesn't do anything with the CSS.

Image

Any idea how to get the CSS to the above list?

Kind regards,

Arie

Kateryna Grynko
Posts: 0
Joined: Thu Nov 15, 2012 9:13 am

Can I give odd and even list items a different color?

Post by Kateryna Grynko »

Hi Arie,

Did you replace a mobilelistName with a name of your list?
Please post a public app link.

Koning Voetbal
Posts: 0
Joined: Thu Feb 27, 2014 2:21 pm

Can I give odd and even list items a different color?

Post by Koning Voetbal »

Hi Kateryna,

Yes, I replaced the name of the list.

You mean with the public app link this one: http://appery.io/app/mobile-frame?src...

I see that I share this app with a href="mailto:support@appery.io" rel="nofollow"support@appery.io/a, the app name is tennisrating.

If you need more information or links, you ask ;-)

Kind regards,

Arie

Evgene Karachevtsev
Posts: 12
Joined: Mon Apr 28, 2014 1:12 pm

Can I give odd and even list items a different color?

Post by Evgene Karachevtsev »

Hello Koning,

I can see only the second list, could you please clarify, where the first one, not working?
Image

Koning Voetbal
Posts: 0
Joined: Thu Feb 27, 2014 2:21 pm

Can I give odd and even list items a different color?

Post by Koning Voetbal »

Hi Evgene,

I'm sorry, I forgot that you must do some search and add the result to the database.

If you try again, you can give me the id that is showing now on the homepage. I can than add some data to the database for you.

Another solution is that you search at the bootom with 17717760 and 25388258 and add both of them (click on 'Toevoegen') so then you should be able to see something on the homescreen.

Kind regards,

Arie

Evgene Karachevtsev
Posts: 12
Joined: Mon Apr 28, 2014 1:12 pm

Can I give odd and even list items a different color?

Post by Evgene Karachevtsev »

Koning,

For both lists you can use the following css rules:

[name=mobilelist_22] li:nth-child(odd) .ui-btn,
[name=list_tennis] li:nth-child(odd) .ui-btn {
background-color: green;
}

[name=mobilelist_22] li:nth-child(even) .ui-btn,
[name=list_tennis] li:nth-child(even) .ui-btn {
background-color: red;
}

Koning Voetbal
Posts: 0
Joined: Thu Feb 27, 2014 2:21 pm

Can I give odd and even list items a different color?

Post by Koning Voetbal »

Hi Evgene,

Tnx alot for, it's working now!

Kind regards,

Arie

Post Reply