Switch Position of Image and Text

3 posts, 0 answers
  1. Nick
    Nick avatar
    5 posts
    Member since:
    May 2012

    Posted 17 May 2012 Link to this post

    Hey I was wondering how it is possible to achieve a format of 
        <text><image>
    instead of 
        <image><text>
    in a panelbar.  I want it to look akin to: http://demos.kendoui.com/web/treeview/templates.html

    I was looking through the panelbar source file and found:
    itemWrapper: template(
    "<#= tag(item) # class='#= textClass(item, group) #'#= contentUrl(item) ##= textAttributes(item) #>" +
    "#= image(item) ##= sprite(item) ##= text(item) #" +
    "#= arrow(data) #" +
    "</#= tag(item) #>"
    ),

    Is there a simple way that I can switch the two when I configure a panel bar?  I've heard others extend widgets, but that looks to be overkill for this small modification.
  2.
  3. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 21 May 2012 Link to this post

    Hi Nick,

    This can be done without templates - though you will need to add a special element around the text and some CSS. Check the first item in this jsFiddle:


    Greetings,
    Kamen Bundev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Nick
    Nick avatar
    5 posts
    Member since:
    May 2012

    Posted 21 May 2012 Link to this post

    Thank you so much for the suggestion!  I ended up modifying it slightly to achieve the desired effect, which looks something like.

    http://jsfiddle.net/bG9WN/3/

    By the way, this is my first time trying to embed jsfiddle, and I wasn't sure how, so I posted the url.
Back to Top