Button Text Alignment

11 posts, 2 answers
  1. Richard
    Richard avatar
    63 posts
    Member since:
    Apr 2008

    Posted 14 Dec 2010 Link to this post

    Can anyone tell me how to align the button text to the left instead of center?  I don't see any properties to manipulate that.

    Thanks!
  2. Bozhidar
    Admin
    Bozhidar avatar
    677 posts

    Posted 15 Dec 2010 Link to this post

    Hello Richard,

    For the time being there is no property to align the RadButton text to left or right. You should overrdie the existing CSS to achieve that:

    .rbDecorated
    {
     padding-left: 2px !important;/* this could be increased if you want to have more space betwwen the left button edge and the text  */
     text-align: left !important;
    }

    You could put the above code in the head section of your document or to any external CSS page related to your project. Please, keep the !important rule to ensure the styles will be applied.

    Best wishes,
    Bojo
    the Telerik team
    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Richard
    Richard avatar
    63 posts
    Member since:
    Apr 2008

    Posted 15 Dec 2010 Link to this post

    Bojo,

    I tried what you suggested but it does not seem to apply to the button when the ButtonType is "LinkButton".

    Here is my button:

    <telerik:RadButton ID="radButton1" runat="server" ButtonType = "LinkButton" CssClass="rbDecorated" BorderStyle="None" AutoPostBack="true" Width="200px" Height="24px" CommandName="AUDIT-SUMMARY" OnClick="btn_Click">
                                            </telerik:RadButton>
  5. Answer
    Bozhidar
    Admin
    Bozhidar avatar
    677 posts

    Posted 15 Dec 2010 Link to this post

    Hi Richard,

    Sorry for misunderstanding I gave a workaround for the standard button. Link buttons has different HTML rendering allied and different CSS classes. You could use the following CSS in the head section of your document:

    .rbLinkButton .rbText
    {
     text-align: left !important;
    }

    I have also changed a little the ASP code  - I put the button border in order to be visible that the text is left aligned and removed the rbDecorated class as we do not need it:

    <telerik:RadButton ID="radButton1" runat="server" ButtonType="LinkButton" AutoPostBack="true" Width="200px" Height="24px" Text="Link Button Left Aligned">
    </telerik:RadButton>


    Kind regards,
    Bojo
    the Telerik team
    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
  6. Richard
    Richard avatar
    63 posts
    Member since:
    Apr 2008

    Posted 15 Dec 2010 Link to this post

    Perfect.  Thanks!
  7. Mike
    Mike avatar
    7 posts
    Member since:
    Jun 2009

    Posted 28 Mar 2011 Link to this post

    And what about if the buttons are on .ascx pages such that we cannot edit the style element.  Is there a way to do this using inline code?

    -Mike
  8. Answer
    Bozhidar
    Admin
    Bozhidar avatar
    677 posts

    Posted 28 Mar 2011 Link to this post

    Hello Mike,

    You can not put this alignment inline, as the styles is applied to the anchor wrapping element, but not to the span element containing the text. If we put the following code in the ASPX /ASCX file:

    <telerik:RadButton ID="rb1" runat="server" Text="remove underlining" ButtonType="LinkButton"
            Skin="Web20" Width="200px" Style="text-align: left;">
        </telerik:RadButton>

    We will get the following HTML output:

    <a id="rb1" class="RadButton RadButton_Web20 rbLinkButton" style="display:inline-block;width:200px;text-align: left;" href="javascript:void(0)">
    <span class="rbText" style="width:100%;padding-left:0;padding-right:0;text-align:center;">remove underlining</span>
    <input id="rb1_ClientState" type="hidden" name="rb1_ClientState" autocomplete="off">
    </a>

    We cannot apply the style to the span element which has the center text alignment. So in that case you have several options, but in all of them you should use the following CSS code:

    .rbLinkButton .rbText
            {
                text-align: left !important;
            }

    You just should be sure, that the code is applied on your page where the user controls is loaded - you could put the CSS into iexternal CSS file and to link it to the head section of your document, or you could put it directly into the head section:

    <head runat="server">
        <title></title>
        <style type="text/css">
            .rbLinkButton .rbText
            {
                text-align: left !important;
            }
        </style>
    </head>


    Kind regards,
    Bojo
    the Telerik team
  9. Mike
    Mike avatar
    7 posts
    Member since:
    Jun 2009

    Posted 28 Mar 2011 Link to this post

    I appreciate the very prompt response!

    Mainly the issue is that I want this applied to some buttons, not all.  And thus if I put it in the document itself it will apply to all of my buttons.

    Is there a way to have it apply only to specific ones?

    And to clarify, I am using a standard button.

    -Mike
  10. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 28 Mar 2011 Link to this post

    Hello Mike,

    You can achieve this by creating custom skin for the RadButton. Please go through the following tutorial for more on creating custom skin.
    Creating a Custom Skin for RadButton.

    Thanks,
    Shinu.
  11. Mike
    Mike avatar
    7 posts
    Member since:
    Jun 2009

    Posted 28 Mar 2011 Link to this post

    Thanks.
  12. Bozhidar
    Admin
    Bozhidar avatar
    677 posts

    Posted 28 Mar 2011 Link to this post

    Hi Mike,

    May be, you could also create a special CSS class to be applied to the button, and to cascade through it, then, the left alignment will be applied only to the buttons with that class:

    .leftAlign .rbText
            {
                text-align: left!important;
            }

    <%@ 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">
            .leftAlign .rbText
            {
                text-align: left !important;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <telerik:RadButton ID="rb1" runat="server" Text="remove underlining" ButtonType="LinkButton"
            Skin="Web20" Width="200px" CssClass="leftAlign">
        </telerik:RadButton>
        </form>
    </body>
    </html>


    Regards,
    Bojo
    the Telerik team
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017