font icons in toolbar overflow

2 posts, 0 answers
  1. Felix
    Felix avatar
    1 posts
    Member since:
    Nov 2015

    Posted 29 Dec 2017 Link to this post

    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>

  2. Neli
    Admin
    Neli avatar
    64 posts

    Posted 02 Jan Link to this post

    Hello Felix,

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top