Templating items

[Matjaz]

How can I achieve, that on ToolBar item image and url is not side by side, but one beneath the other. Image on top and text on bottom.
My current code is:

$("#toolbar").kendoToolBar({
        items: [
            { type: "button", text: "Prodaja", imageUrl: "Image1.png"},
            { type: "button", text: "Oddaja", imageUrl: "Image2.png"}
        ]
    });

[Alexander Valchev]

Hello Matjaz,

Thank you for contacting us.

Please use the following CSS:

#toolbar .k-image {
    display: block;
    margin: 0 auto;
}

For your convenience I prepared a small example: http://dojo.telerik.com/AyOX

I hope this will help.

Regards,
Alexander Valchev
Telerik

 

 

[Matjaz]

Great.
Thank you.

[Marco]

Is it also possible when you use the spriteCssClass attribute?

$("#toolbar").kendoToolBar({
        items: [
            { type: "button", text: "Prodaja", spriteCssClass: "mainsprite folder_document"},
            { type: "button", text: "Oddaja", spriteCssClass: "mainsprite new_document"}
        ]
    });

 

[Veselin Tsvetanov]

Hi Marco,

The same could be achieved for sprites using the following CSS rule:

#toolbar .k-sprite {
    display: block;
    margin: 0 auto;
    position: fixed;
}

Together with the following JavaSctript call after the Toolbar has been initialized:

$("#toolbar").find('.k-sprite').after($('<br/>'));

Regards,
Veselin Tsvetanov
Progress Telerik

[Marco]

Hi Veselin,

 

Thanks for the effort!

Kind Regards,

Marco