AN EXAMPLE of what i mean
How do i make the buttons have an equal space among them? Also the vertical alignment is little incorrect so if you have an idea how do i fix that would be greatly appreciated.
Thank you
How do i make the buttons have an equal space among them? Also the vertical alignment is little incorrect so if you have an idea how do i fix that would be greatly appreciated.
Thank you
1 Answer, 1 is accepted
0
Accepted
Hello,
We have answered your support ticket on the matter and I am pasting here the findings from it in case other people have similar questions
The embedded by Telerik buttons are aligned correctly. However, buttons that comes from FaceBook, Twitter. Google + etc. are coming with their own html rendering and CSS and in most cases we could not override them. In simple words, Facebook does not care if their like button is not aligned with the tweet button and we could do very little to compensate that.
Note that the below fix is valid only for the same configuration that was provided, different settings for the standard buttons may result in different rendering or at least different size, so all cases must be examined in their own light:
Kind regards,
Marin
the Telerik team
We have answered your support ticket on the matter and I am pasting here the findings from it in case other people have similar questions
The embedded by Telerik buttons are aligned correctly. However, buttons that comes from FaceBook, Twitter. Google + etc. are coming with their own html rendering and CSS and in most cases we could not override them. In simple words, Facebook does not care if their like button is not aligned with the tweet button and we could do very little to compensate that.
Note that the below fix is valid only for the same configuration that was provided, different settings for the standard buttons may result in different rendering or at least different size, so all cases must be examined in their own light:
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <style type="text/css"> /* in share button */ .sshListItem .IN-widget { padding-top: 1px; /* push button down, icnreasing the value will move it down */ } /* twitter */ .sshListItem .twitter-share-button { vertical-align: middle; /* this will put the button in middle compared to other button */ width: 85px !important; /* this will devrease button wrapper width and will remove the empty space to the right, it will allow the counter to show up to 5 digits, decrease or increase the width value if necessary */ } /*google + */ .sshListItem #___plusone_0 { vertical-align: middle !important; /* this will put the button in middle compared to other button */ width: 65px !important; /* this will devrease button wrapper width and will remove the empty space to the right, it will allow the counter to show up to 5 digits, decrease or increase the width value if necessary */ } </style> </head> <body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <telerik:RadSocialShare ID="MyRadSocialShare" runat="server" UrlToShare="" BorderWidth="1px" TitleToShare="" Width="95%" Orientation="Horizontal" Visible="true"> <EmailSettings SMTPServer="localhost" FromEmail="info@jugoslav.com" /> <MainButtons> <telerik:RadFacebookButton ButtonType="FacebookShare" ButtonLayout="ButtonCount" Width="90" /> <telerik:RadLinkedInButton CounterMode="Horizontal" ShowZeroCount="true" /> <telerik:RadTwitterButton CounterMode="Horizontal" /> <telerik:RadGoogleButton AnnotationType="Bubble" ButtonSize="Medium" Width="90" /> <telerik:RadSocialButton SocialNetType="MySpace" /> <telerik:RadSocialButton SocialNetType="Blogger" /> <telerik:RadSocialButton SocialNetType="Digg" /> <telerik:RadSocialButton SocialNetType="Delicious" /> <telerik:RadSocialButton SocialNetType="SendEmail" /> </MainButtons> </telerik:RadSocialShare> </form> </body> </html>Kind regards,
Marin
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.