Listview bug ?

6 posts, 0 answers
  1. leonard
    leonard avatar
    2 posts
    Member since:
    Dec 2013

    Posted 15 Dec 2013 Link to this post

    Hi,

    I just using Icenium trial. But something weird when i created <data-role="listview">, according to tutorial. 
    When no "data-style" set, there are no separator lines for each item, when <data-style="inset">, there are no side lines.
    (see attachment)

    I tried in Dojo, it looks normal.

    I tried in my iPhone, just the same. Need help.
  2. Steve
    Admin
    Steve avatar
    10941 posts

    Posted 17 Dec 2013 Link to this post

    Hello Leonard,

    Icenium comes with jQuery and Kendo UI templates, which one did you use to get this problem? Dojo is  yet another js framework that we do not bring along and cannot advise on. Please either isolate this in a sample app and let us know its name or prepare a sample jsbin.com that exhibits the problem. Make sure you're using latest Kendo UI and not an older version.

    Regards,
    Steve
    Telerik
    You've missed the Icenium Visual Studio Integration keynote? It has been recorded and posted here.
    Looking for tips & tricks directly from the Icenium team? Check out our blog!
    Share feedback and vote for features on our Feedback Portal.
  3. leonard
    leonard avatar
    2 posts
    Member since:
    Dec 2013

    Posted 17 Dec 2013 Link to this post

    Hi, Steve

    I used Kendo UI template, by doing this :
    new project --> Kendo UI Mobile

    and i changed the first page by adding a list view.

    <!--Home-->
        <div id="tabstrip-home"
            data-role="view"
            data-title="Home">
            
            <div data-role="header">
                <div data-role="navbar">Home</div>
            </div>
            <div data-role="content">
                <ul data-role="listview" data-style="inset">
                    <li><a href="#">Do this</a></li>
                    <li><a href="#">Think That</a></li>
                    <li><a href="#">See This</a></li>
                    <li><a href="#">Solve This</a></li>
                </ul>
            </div>
        </div>
  4. Zdravko
    Admin
    Zdravko avatar
    657 posts

    Posted 20 Dec 2013 Link to this post

    Hello Leonard,

    I found how you can fix the missing borders. Open main.css file and find there following classes:
    .km-ios .km-list > li,
    .km-flat .km-list > li {
        background: none;
        border: none;
    }

    Then remove border:none line.
    I hope it helps.
    Thanks.


    Regards,
    Zdravko
    Telerik
    You've missed the Icenium Visual Studio Integration keynote? It has been recorded and posted here.
    Looking for tips & tricks directly from the Icenium team? Check out our blog!
    Share feedback and vote for features on our Feedback Portal.
  5. Leonard
    Leonard avatar
    17 posts
    Member since:
    Feb 2013

    Posted 20 Dec 2013 Link to this post

    Thank you Zdravko!

    It looks normal now.
    By the way, how can it be remove the borders as a default style?
  6. Vladimir Zagorski
    Admin
    Vladimir Zagorski avatar
    15 posts

    Posted 23 Dec 2013 Link to this post

    Hello Leonard,

    Glad to hear that Zdravko's suggestion solves your issue.

    In order to completely remove the borders for the listview items in ios6 and ios7 themes you can use the following css selector:

    .km-ios7 .km-listview.km-list > li,
    .km-ios6 .km-listview.km-list > li {
        background-color: #fff;
        border-width:0;
        box-shadow:none;
    }

    Let me know if I can be of any further help.

    Regards,
    Vladimir Zagorski
    Telerik
    You've missed the Icenium Visual Studio Integration keynote? It has been recorded and posted here.
    Looking for tips & tricks directly from the Icenium team? Check out our blog!
    Share feedback and vote for features on our Feedback Portal.
Back to Top