This is a migrated thread and some comments may be shown as answers.

LIstview LI formatting issue

4 Answers 104 Views
ListView (Mobile)
This is a migrated thread and some comments may be shown as answers.
Andrew
Top achievements
Rank 1
Andrew asked on 08 Nov 2012, 02:49 AM
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!

4 Answers, 1 is accepted

Sort by
0
Juan Carlos
Top achievements
Rank 1
answered on 08 Nov 2012, 08:44 AM
$("#ul_ID").kendoMobileListView({
dataSource : data,
template : $("#template").text(),
style: "inset",
});
0
Andrew
Top achievements
Rank 1
answered on 08 Nov 2012, 11:31 PM
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!
0
Andrew
Top achievements
Rank 1
answered on 09 Nov 2012, 02:07 AM
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!



0
Firas
Top achievements
Rank 1
answered on 26 Nov 2012, 06:17 AM
You might also wanna try this

$("#ul_ID").kendoMobileListView({

dataSource : data,
template : $("#template").text(),
style: "inset",
type: "group"
});
Tags
ListView (Mobile)
Asked by
Andrew
Top achievements
Rank 1
Answers by
Juan Carlos
Top achievements
Rank 1
Andrew
Top achievements
Rank 1
Firas
Top achievements
Rank 1
Share this question
or