Listview bug ?

[leonard]

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.

[Steve]

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.

[leonard]

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>

[Zdravko]

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.

[Leonard]

Thank you Zdravko!

It looks normal now.
By the way, how can it be remove the borders as a default style?

[Vladimir Zagorski]

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.