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

CssClass on Menu from DataSource

1 Answer 44 Views
Menu
This is a migrated thread and some comments may be shown as answers.
Tim
Top achievements
Rank 1
Tim asked on 18 Sep 2015, 09:12 PM

I am trying to attach a Home Icon to my Menu (which is loaded remotely from a dataSource), and am trying to find out how to display the icon centered similar to the <span> tags would in the <li>. The icon displays, but appears above any text or drop arrow.

Here is the syntax inside the HTML body after loading kendo and bootstrap:

<ul id="settingsmenu" />
<script>
  $(document).ready(function() {
    $("#settingsmenu").kendoMenu({
      dataSource: [
        {   text: "", cssClass: "glyphicon glyphicon-home", items: []}
      ]
    });
  });
</script>
 

Any ideas as to how to get Text, Icon, and Arrow lined up properly, assuming it could just be a styling issue? I am relatively new as how to setup styles, so can't figure this out for myself. Might this be a case where I would need to create a Kendo Template for how these appear as an alternative?

 

Thanks!

1 Answer, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 23 Sep 2015, 08:35 AM
Hello Tim,

Please inspect the Menu's HTML markup with a DOM inspector and check if there are background-position styles applied by your custom CSS classes. Then, add or modify these styles in order to move the background image to the desired location in the Menu items.

Regards,
Dimo
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Menu
Asked by
Tim
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Share this question
or