When using font icons in a toolbar via the attributes configuration option, the overflow gets all messed up. The attribute (in this case, the class attribute) gets applied to all elements in the overflow container and all hell brakes loose:
<!DOCTYPE html>
<html>
<head>
<base href="https://demos.telerik.com/kendo-ui/toolbar/index">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.material.mobile.min.css" />
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<script src="https://kendo.cdn.telerik.com/2017.3.1026/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.3.1026/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div class="demo-section k-content wide">
<div id="toolbar"></div>
</div>
<script>
$(document).ready(function() {
$("#toolbar").kendoToolBar({
items: [
{
type: "button",
text: "But1",
attributes: { "class": "fa fa-2x fa-map-marker" },
},
{
type: "button",
text: "But1",
attributes: { "class": "fa fa-2x fa-map-marker" },
},
{
type: "button",
text: "But1",
attributes: { "class": "fa fa-2x fa-map-marker" },
},
{
type: "button",
text: "But1",
attributes: { "class": "fa fa-2x fa-map-marker" },
},
{
type: "button",
text: "But1",
attributes: { "class": "fa fa-2x fa-map-marker" },
},
{
type: "button",
text: "But1",
attributes: { "class": "fa fa-2x fa-map-marker" },
},
{
type: "button",
text: "But1",
attributes: { "class": "fa fa-2x fa-map-marker" },
}
]
});
$("#dropdown").kendoDropDownList({
optionLabel: "Paragraph",
dataTextField: "text",
dataValueField: "value",
dataSource: [
{ text: "Heading 1", value: 1 },
{ text: "Heading 2", value: 2 },
{ text: "Heading 3", value: 3 },
{ text: "Title", value: 4 },
{ text: "Subtitle", value: 5 }
]
});
});
</script>
</div>
</body>
</html>
1 Answer, 1 is accepted
Thank you for reporting the issue.
It is now logged as a bug in our GitHub repository. You can track our progress on it on the following link. In the provided link you will find also a workaround.
As a sign of gratitude for reporting a bug your Telerik points are now updated.
Regards,
Neli
Progress Telerik