Left icon padding is wrong

[Jon]

Hi,

I'm looking at this page as a reference: http://demos.telerik.com/aspnet-ajax/button/examples/embeddedicons/defaultcs.aspx

Looking at the left padding on the left icon and comparing it with the right padding on the right icon.  The right icon looks better and has more padding.  Could the CSS be amended for the next release to add a couple of extra px to the left icon?

Also, are you open to suggestions for extra embedded icons or are you trying to keep that down to a smallish number?

Cheers,

Jon

[Bozhidar]

Hi Jon,

Thanks for your feedback. The button height is 22px and when we have right or left icon, we set padding of 25 pixels. With that dimensions the most appropirate icon size would be 16x16 px. Of course it could be 14x16, 18x18 or anything else. It also depends by the icon shape also - is it rounded, is it more angular. So, to have a fixed  left, right, top, bottom positioning will not be useful, that`s why we have properties to set explicitly top, right, bottom and left positions. They have default values. For example, the left icons is top: 3px, left: 4px. If these values are not appropriate, you could use the following properties: PrimaryIconTop, PrimaryIconRight, PrimaryIconBottom, PrimaryIconLeft, SecondaryIconTop, SecondaryIconRight, SecondaryIconBottom, SecondaryIconLeft.

If we use the code form the demo, and want to have more space form the left side, we could change PrimaryIconLeft value from 4 to 6 for example:

<telerik:RadButton ID="RadButton1" runat="server" Text="Add">
<Icon PrimaryIconCssClass="rbAdd" PrimaryIconLeft="6" PrimaryIconTop="4" />
</telerik:RadButton>

The result, could be seen in the image attached: beforeafter.gif.

And, yes, we are open for suggestions for extra embedded icons, but we are trying not to increase the size sprite and the CSS. We will consider the most appropriate suggesestions and it is very possible to be included in a future release version. If you need some special icons, you may have a look at this demo: Button Custom Icons, you have the possibility to use single icons, or to create a sprite image and with some extra CSS lines to have more icons with one server request only.

Regards,
Bojo
the Telerik team

[Jon]

Many thanks for the comprehensive response Bojo.

I think that the question wasn't so much could you have padding (but thanks for the detailed description of how to do it), but more of a comment on the fact that in the demo the default padding seems to be greater to the right of the right icon than to the left of the left icon.  That said many icons seem to be non central and more to the left than the right so that effect could be an illusion.

I'll let you know if I come across any good suggestions re the embedded icons.  Really it's a case of me being lazy.  One that is missing is a menu type icon to allow a button to show a popup menu.

Can we create our own css for use with the PrimaryIconCSSClass tag?  Save writing paths all over the place...

Regards,

Jon

[Bozhidar]

Hello Jon,

Thanks for the feedback about the demo, we will review it with our visual UX designers, and will fix it if it is necessary.

As for the second question, I have prepared for you a small project providing "know how" to have your own embedded icons using a very simple CSS and sprite image with icons on your choice.

I suggested two different ways for embedding the icons. In all cases, you should prepare a sprite image. Then you have set class names related to the images in the sprite, and to group them and set the url to the sprite, that all these classes will use. next step will be to define the background-positions for each icon and you are ready to use your new predefined icons. Just replace PrimaryIconCssClass="rbAdd" with PrimaryIconCssClass="cbHtml"  where the original embedded RadButton Predefined icond is replace form the new custom cbHtml class defining Custom Button Html icons. You could use the PrimaryIconTop, PrimaryIconRight, PrimaryIconBottom, PrimaryIconLeft properties to position the icon inside the button, or respectively SecondaryIconTop, SecondaryIconRight, SecondaryIconBottom, SecondaryIconLeft if you have SecondaryIconCssClass.

The other suggested way is almost the same, but it predefine the icon position in the button directly form the custom css file. That will save some extra code lines. In the sample project, the CSS class used for this method is called: .cbMediaCssOnly.

All the best,
Bojo
the Telerik team

[Jon]

Hi Bojo,

I've just had a go at this and yes it does look better however it is worth noting that the icon moves to the righ but the text stays in the same place, as such with large values of PrimaryIconLeft the icon will be above the text.  Is this by design?

Regards.

Jon

[Bozhidar]

Hi Jon,

The anchor tag that wraps the button is relatively positioned, while second and primary icon are absolutely positioned to the anchor tag. That means that if you have text in the button and you are moving the icon - top, right, left, bottom - it will not affect the text position and it will stay at the same place.

If you are using PrimaryIconLeft or PrimaryIconRight with large values the icon will be above the text. It is normal CSS/Browser behavior and we have decided to leave it like that, because it will be expected and intuitive.

All the best,
Bojo
the Telerik team

[Jon]

Hi Bojo,

Good stuff - I doubt many people would use it that way but thought I'd mention it just in case it was a bug.

Cheers,

Jon