LIstview LI formatting issue

5 posts, 0 answers
  1. Andrew
    Andrew avatar
    14 posts
    Member since:
    Nov 2010

    Posted 07 Nov 2012 Link to this post

    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!
  2. Juan Carlos
    Juan Carlos avatar
    8 posts
    Member since:
    Oct 2012

    Posted 08 Nov 2012 Link to this post

    $("#ul_ID").kendoMobileListView({
    dataSource : data,
    template : $("#template").text(),
    style: "inset",
    });
  3. Kendo UI is VS 2017 Ready
  4. Andrew
    Andrew avatar
    14 posts
    Member since:
    Nov 2010

    Posted 08 Nov 2012 Link to this post

    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!
  5. Andrew
    Andrew avatar
    14 posts
    Member since:
    Nov 2010

    Posted 08 Nov 2012 Link to this post

    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!



  6. Firas
    Firas avatar
    1 posts
    Member since:
    Nov 2012

    Posted 26 Nov 2012 Link to this post

    You might also wanna try this

    $("#ul_ID").kendoMobileListView({

    dataSource : data,
    template : $("#template").text(),
    style: "inset",
    type: "group"
    });
Back to Top
Kendo UI is VS 2017 Ready