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

3 posts, 0 answers
  1. Shoji Kaburagi
    Shoji Kaburagi avatar
    27 posts
    Member since:
    Jul 2012

    Posted 28 Feb 2014 Link to this post

    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!
  2. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2565 posts

    Posted 03 Mar 2014 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
  4. Shoji Kaburagi
    Shoji Kaburagi avatar
    27 posts
    Member since:
    Jul 2012

    Posted 05 Mar 2014 in reply to Kiril Nikolov Link to this post

    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!
Back to Top