Rounded List Edges

[Bucs]

Trying to figure out how best to round off the edges on the first and last item in a List component to give the list a slightly rounded look. I know I need to set the border-top-left-radius (and right) values for the first item and the bottom-radius values for the last item in the list, but not exactly sure where to do this (or how).

It seems that these radius values have to change on the outer "x-list" div as well as the first and last "x-list-item" to achieve this look. Is this true? Is there a better way to do this?

Thanks

[elishnevsky]

Just add ui: 'round' config to your list

[Bucs]

Hmmm, thanks...but that doesn't seem to work for me. This is a Nested list, should that matter?

[Bucs]

I found that I had to add my own classes to get it to work, using the border-[top/bottom]-[right/left-radius: 1em to both the x-list class as well as the x-list-item:[first/last]-child CSS classes using those new selectors. Works perfectly, but it would sure be nice if it did work your way. I guess if I used Compass and SASS and generated my own style that would be easier too...but the plain old ui:'round' didn't work for me out of the box.

Thanks for the reply tho!

[elishnevsky]

You didn't say it was a nested list Then you're right, it won't work, you have to do your own styling, which is fairly easy with Compass.

[smwald]

Is there a way to have grouped elements be inline in the list - currently it renders separate lists under each grouped letter title and the letter title extends the full width of the page, unlike the lists which take up about 95% of the page width.

Thanks!

Stephen

[markwyner]

This should be pretty easy with a few lines of CSS. Give your Ext.List a unique class so you can style it independently of other Ext.Lists. Something like:

cls: 'Special'

Then use the following to get your corners:

.Special .x-list-item:first-child {
	-webkit-border-top-left-radius: 5px;
	-webkit-border-top-right-radius: 5px;
}
.Special .x-list-item:last-child {
	-webkit-border-bottom-left-radius: 5px;
	-webkit-border-bottom-right-radius: 5px;
}

That should get you rolling.

Good luck.