List ui:round breaks the border and selected item

[varunet]

Hi,

I am trying to use the List Component with ui: 'round' parameter. But the list component doesn't seem to render properly.

The top and bottom corners are not rounded and the selected item state background color is not blue. seems like the list item color white is on top of the blue.

The kitchen sink example seems to work fine.. not sure why..! is there a way to fiddle sencha touch to give an example?

I am using Sencha 2.1.0 GPL

list-uiRound.jpg

[mitchellsimoens]

Did you do an upgrade or compile sass or anything? By default the selected style should be there.

[BostonMerlin]

I had the same problem, square list, no rounded corners, 3d like text in the list item. When I turned on list groups, the proper "round" effect was applied.

[azamatoak]

I have the same problem. When you refer to list groups to resolve this I'm assuming you're referring to the grouped property:

{
    xtype: 'list',
    grouped: true
}

If that is correct, is it possible to get proper rounded corners on Lists without using groups?

[BostonMerlin]

you need the list ui="round" config set to get round corners. The point of discussion is that it's not working at the moment for some of us. More than likely a bug related to one or more config settings, overrides or css customizations.

[chrixian]

For what it's worth I have the exact same issue with ui 'round'

I also get the same result when I edit the code preview here: http://docs.sencha.com/touch/2-1/#!/...list-section-2 to include ui: 'round'

[azamatoak]

Including ui: round config makes no difference. I am still seeing square corners on lists.

[jlaguilar]

I am experiencing the same issue. I just downloaded a fresh Touch SDK and did a basic Ext.dataview.List with configs ui: 'round', grouped: true. The list's item selected shows white with letters in 3D just like above.

The lists in the Kitchen Sink example work fine because they are not ui:'round'. ui: 'round' CSS properties are not correct. List disclosure icon also shows misplaced on last items, etc. Please review all ui:'round' CSS properties.

Thanks!

[azamatoak]

I did some digging and found that one of the culprits is the -webkit-transform: translate3d(x,y,z) and the transform: translate3d(x,y,z) that are applied to the list item when it is clicked. It is generated from the CssTransform.js file. Would love to have a solution for this.

[BostonMerlin]

I still get this problem with ST 2.1.0. When a list is set to round and grouped, selecting a list item makes the text 3d and the list items background is never highlighted.

I'm trying to navigate the css hierarchy to override the highlight but so-far no luck. This problem is several months old and is effecting many. Sencha, do we have a resolve?

John