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

ListView caption is grey for data-style=inset and data-type=group

3 Answers 163 Views
ListView (Mobile)
This is a migrated thread and some comments may be shown as answers.
Shoji Kaburagi
Top achievements
Rank 1
Shoji Kaburagi asked on 28 Feb 2014, 07:41 PM
Hello,

We have a mobile app that uses a list view with data-style is inset and data-type is group. The app is also used with IE on Windows as well. Right now the KendoUI version is 2013 Q3.

When we use the list view in IE 11, the background color for each group caption is grey. A sample html is below and the image is attached:

<!DOCTYPE html>
<html>
<head>
    <title>Basic usage</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" >
    <script src="../../../js/jquery.min.js"></script>
    <script src="../../../js/kendo.mobile.min.js"></script>
    <script src="../../content/shared/js/console.js"></script>
    <link href="../../../styles/kendo.mobile.all.min.css" rel="stylesheet" />
    <style>
        [href*=index], #back-button
        {
            visibility: hidden;
        }
    </style>
</head>
<body>
    <div data-role="view" data-title="Destinations" id="listview-home">
    <ul data-role="listview" data-style="inset" data-type="group" style="background-color: #8e8;" >
        <li>Africa
            <ul>
                <li data-icon="toprated"><a>Nairobi</a></li>
            </ul>
        </li>
        <li>
            America
            <ul>
                <li data-icon="globe"><a>Bostonaa</a></li>
                <li data-icon="globe"><a>Ottawa</a></li>
                <li data-icon="toprated"><a>San Francisco</a></li>
            </ul>
        </li>
        <li>
            Asia
            <ul>
                <li data-icon="globe"><a>Bombay</a></li>
            </ul>
        </li>
        <li>
            Australia
            <ul>
                <li data-icon="globe"><a>Melbourne</a></li>
                <li data-icon="toprated"><a>Sydney</a></li>
            </ul>
        </li>
        <li>
            Europe
            <ul>
                <li data-icon="globe"><a>Cannes</a></li>
                <li data-icon="globe"><a>Liverpool</a></li>
                <li data-icon="toprated"><a>London</a></li>
            </ul>
        </li>
    </ul>
</div><style></style>
    <script>
        window.kendoMobileApplication = new kendo.mobile.Application(document.body);
    </script>
</body>
</html>

As you see the background color for captions for "Africa", "America", "Asia" are grey and I tried change the style but am unable to set so far.

Is there any way to change this?

Thanks!

3 Answers, 1 is accepted

Sort by
0
Kiril Nikolov
Telerik team
answered on 03 Mar 2014, 09:52 AM
Hello Shoji,

First of all I would like to inform you that the data-style="inset" in iOS7 application has been removed, as the items are all inset by default, so the property is not needed if you are using iOS 7 platform. As for the ListView styling - I am not exactly sure which exact background color you would like to change, but please check the following example, and let me know if it helps:

http://jsbin.com/gemit/1/edit

Regards,
Kiril Nikolov
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Shoji Kaburagi
Top achievements
Rank 1
answered on 05 Mar 2014, 08:16 PM
Thanks for the reply. I can put color on the captions. Thanks.

Is there anyway I can put color on the header above it as well??

Please see attached.

Thanks!
0
Kiril Nikolov
Telerik team
answered on 06 Mar 2014, 11:50 AM
Hi Shoji,

You can achieve this using the border-top-color property of the title container. Please check the updated example:

http://jsbin.com/gemit/3/edit

Regards,
Kiril Nikolov
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
ListView (Mobile)
Asked by
Shoji Kaburagi
Top achievements
Rank 1
Answers by
Kiril Nikolov
Telerik team
Shoji Kaburagi
Top achievements
Rank 1
Share this question
or