How do I set the style of the last item in a list so that it has a bottom border and rounded corners?

[Peter Mc]

When I populate a list from a service or via javascript, the last item isn't styled properly, it just clips off at the bottom and doesn't have a bottom border or proper corners.

Is there a trick to make this happen easily? or do I have to apply the style via JS?

thanks

[Yurii Orishchuk]

Hi Peter.

Yes you can style last item for certain list like you need.

Please follow steps below to do it:

1 Open your page(where you have list) and activate list component.(not just listItem). http://prntscr.com/3nx11g/direct

2 Set "Class Name" property for list component with value "yourListClassName". http://prntscr.com/3nx1hj/direct

3 Create new CSS asset.

4 Populate it with following code:

precode

.yourListClassName.ui-listview li:last-child{
border: 1px solid red;
}

/code/pre

That's all.

Regards.

[xman]

I have a list on a page, I don't want to have any borders (those brown/red lines) as seen here: http://awesomescreenshot.com/0d83vtm7af

How can I do that?

[xman]

I have a list on a page, I don't want to have any borders (those brown/red lines) as seen here: http://awesomescreenshot.com/0d83vtm7af

How can I do that?

[Yurii Orishchuk]

Hi xman,

Here is a solution:

1 Add css asset.

2 Populate it with following CSS:

pre

html body ul.ui-listview{
box-shadow: 0 0 0;
}

html body ul.ui-listview .ui-btn{
border: 0px solid #000;
}

/pre

Regards.