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

Touch friendlier toolbar

2 Answers 65 Views
Editor
This is a migrated thread and some comments may be shown as answers.
Michael H
Top achievements
Rank 2
Michael H asked on 26 Sep 2013, 10:26 PM
Is there an easy way to make the toolbar buttons bigger for tablet screens? 

Thanks

2 Answers, 1 is accepted

Sort by
0
Accepted
Dimo
Telerik team
answered on 27 Sep 2013, 09:56 AM
Hello Michael,

In order to make the Editor toolbar buttons bigger, you need to do the following:

1. Increase the button size, which is by default 24px:

.k-button-group .k-tool-icon {
    width: 24px;
    height: 24px;
}

2. Replace all button background image styles, because currently they are located in a sprite image, which does not allow bigger button size (you will start seeing adjacent images in the button).

3. Modify all backgrond position styles, which are now adjusted for the current sprite and button size.

I would not say that the above procedure is easy, so an easier approach would be to zoom the buttons with CSS:

.k-button-group .k-tool-icon {
    zoom: 1.4;
}

A negative side effect would be that the button icons may not look very well, because they are enlarged.

Regards,
Dimo
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Michael H
Top achievements
Rank 2
answered on 27 Sep 2013, 08:45 PM
Thanks Dimo.

I will play around with the CSS files and see what I can do.
Tags
Editor
Asked by
Michael H
Top achievements
Rank 2
Answers by
Dimo
Telerik team
Michael H
Top achievements
Rank 2
Share this question
or