Padding and alignment

2 posts, 1 answers
  1. Jugoslav
    Jugoslav avatar
    64 posts
    Member since:
    Mar 2011

    Posted 22 Feb 2012 Link to this post

    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
  2. Answer
    Marin Bratanov
    Admin
    Marin Bratanov avatar
    3595 posts

    Posted 23 Feb 2012 Link to this post

    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:

    <%@ 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">
    <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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top