LIstview LI formatting issue

[Andrew]

Hello, seems silly, but I can't figure it out.

I have a Grouped Listview being filled by an external datasource. I want the listview to appear exactly as your demo on the site where it's embedded in the "iphone simulator" with the lines/border between the same list items in each grouping. No matter how I try this on my phone or my desktop to test I cannot reproduce that same appearance and for all intents when I examine the code and styles in use on each element it appears the same. What am I missing here? How do I get that thin border on the elements between the groups as in the demo on the site?

Thanks!

[Juan Carlos]

$("#ul_ID").kendoMobileListView({
dataSource : data,
template : $("#template").text(),
style: "inset",
});

[Andrew]

Very close! Thanks Juan! Take a look at the pics I've attached. The one with the phone is from the Telerik site, the other is from Firefox on my PC. When I use the inset option it does look nice, but I'd like to have the full screen grouping displayed.

Thanks!

[Andrew]

Perhaps someone can help me out with the reason this fixed it:

<style scoped>

.km-ios .km-list > li {

border-bottom: 1px solid rgba(0, 0, 0, 0.1);

}

</style>



It would seem to me that should already be included in the many style sheets I have attempted to link to in my page.

<link href="styles/kendo.common.min.css" rel="stylesheet" />

<link href="styles/kendo.mobile.all.min.css" rel="stylesheet" />

<link href="styles/kendo.default.min.css" rel="stylesheet" />

<link href="styles/examples.css" rel="stylesheet" />

Why did I have to add that little style block to the page to get the underline when it seems to me it should be buit into the listview styles?

Thanks!

[Firas]

You might also wanna try this

$("#ul_ID").kendoMobileListView({
dataSource : data,
template : $("#template").text(),
style: "inset",
type: "group"
});