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

Add space between spriteCssClass icon and text in button

2 Answers 500 Views
Button
This is a migrated thread and some comments may be shown as answers.
Anna
Top achievements
Rank 1
Anna asked on 30 Oct 2015, 10:13 PM

Hi kendo team,

In kendo button (or other widgets like toolbar that  uses button), there are 3 ways of defining the button icon - imageUrl, icon, and spriteCssClass. I'm using spriteCssClass property of kendo button to define my customized icon. When I define a kendo button with spriteCssClass and text, the text is squashed against my ​spriteCssClass defined icon. Also, I want it so that when there is no text, my button doesn't have a odd extra whitespace on the right. (See example: http://dojo.telerik.com/Ezuga) 

{
    text: "button text"
    spriteCssIcon: "my-custom-icon-css"
}

When use icon property to define a button icon, there is a fine whitespace between the icon and text. How can I achieve this with spriteCssClass? Or better yet, can you help to fix it so the spriteCssClass will act just like the icon added through the icon property?

 

 

2 Answers, 1 is accepted

Sort by
0
Accepted
Dimiter Topalov
Telerik team
answered on 02 Nov 2015, 02:51 PM
Hi Ama,

You can separate the text from the icon by using an additional CSS style:

.k-toolbar .k-button-icontext .k-sprite {
  margin-right: 5px;
}


Feel free to adjust the distance between the icon and the text with the margin-right property value. 

Using this approach guarantees that there will not be an extra white space on the right of the icon when there is no text, because the k-button-icontext class is applied only to Toolbar buttons that have icon and text.

By the way, we will add a CSS rule similar to the above in the future Kendo UI versions.

Let us know if you have further questions.

Regards,
Dimiter Topalov
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Anna
Top achievements
Rank 1
answered on 02 Nov 2015, 04:22 PM
Thanks for replying. That's great news. =)
Tags
Button
Asked by
Anna
Top achievements
Rank 1
Answers by
Dimiter Topalov
Telerik team
Anna
Top achievements
Rank 1
Share this question
or