CssClass on Menu from DataSource

2 posts, 0 answers
  1. Tim
    Tim avatar
    1 posts
    Member since:
    Aug 2015

    Posted 18 Sep 2015 Link to this post

    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!

  2. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 23 Sep 2015 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
Back to Top