Shoji Kaburagi
Top achievements
Rank 1
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!
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
0
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
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
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!
Is there anyway I can put color on the header above it as well??
Please see attached.
Thanks!
0
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
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!