PanelBar Append with Image Atrributes

4 posts, 0 answers
  1. Carrie
    Carrie avatar
    27 posts
    Member since:
    Aug 2013

    Posted 08 Oct 2013 Link to this post

    Hello,

    I am trying the following append call but I am not seeing the style attributes added.   The append works and I see the image and text but not the styling. 

    Any help is appreciated.

    Thanks,
    Carrie
    panelBar.append(
               [
                   {
                       text: "Title",
                       encoded: false,                                
                       content: "Some Text",
                       imageUrl: "myimage.jpg",
                       imageHtmlAttributes: { style: "margin-top:8px;margin-right:8px;" }
                   }
               ]
           );
  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 10 Oct 2013 Link to this post

    Hi Carrie,

    In order to apply additional styling to the appended item you could add custom CSS class to it:

    panel.append([{
        text: "Title",
        encoded: false,                               
        content: "Some Text",
        imageUrl: "myimage.jpg",
        cssClass: "myClass"
    }]);
    </script>
     
    <style scoped>
    .myClass {
        margin-top:8px !important;
        margin-right:8px !important;                   
    }
    </style>
    Regards,
    Iliana Nikolova
    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
  4. Carrie
    Carrie avatar
    27 posts
    Member since:
    Aug 2013

    Posted 10 Oct 2013 Link to this post

    Thanks for the direction however I do not want the styling applied to the entire <li>.    I just want it applied to the image.   Using the imageCssClass also does not work.   I wonder if this is a bug? 

    In any case I got it to work by tweaking the styling a bit like so:
    <style scoped>
    .actionLogImage>span>img  {
        margin-top:8px !important;
        margin-right:8px !important;                 
    }
    </style>
  5. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 14 Oct 2013 Link to this post

    Hi Carrie,

    I am glad to hear everything is working fine now. As for the imageCssClass - I am afraid such a method is not supported, however you could check the spriteCssClass.
     

    Regards,
    Iliana Nikolova
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top
Kendo UI is VS 2017 Ready