This is a migrated thread and some comments may be shown as answers.

Templating items

5 Answers 24 Views
Toolbar
This is a migrated thread and some comments may be shown as answers.
Matjaz
Top achievements
Rank 1
Matjaz asked on 25 Jul 2014, 06:05 PM
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"}
        ]
    });

5 Answers, 1 is accepted

Sort by
0
Accepted
Alexander Valchev
Telerik team
answered on 29 Jul 2014, 08:51 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Matjaz
Top achievements
Rank 1
answered on 29 Jul 2014, 03:14 PM
Great.
Thank you.
0
Marco
Top achievements
Rank 1
answered on 20 Nov 2019, 10:26 AM

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"}
        ]
    });

 

0
Veselin Tsvetanov
Telerik team
answered on 22 Nov 2019, 09:12 AM

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

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Marco
Top achievements
Rank 1
answered on 22 Nov 2019, 09:14 AM

Hi Veselin,

 

Thanks for the effort!

Kind Regards,

Marco

Tags
Toolbar
Asked by
Matjaz
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
Matjaz
Top achievements
Rank 1
Marco
Top achievements
Rank 1
Veselin Tsvetanov
Telerik team
Share this question
or