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

Button Text Alignment

12 Answers 2326 Views
Button
This is a migrated thread and some comments may be shown as answers.
Richard
Top achievements
Rank 2
Richard asked on 14 Dec 2010, 10:48 PM
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!

12 Answers, 1 is accepted

Sort by
1
Bozhidar
Telerik team
answered on 15 Dec 2010, 08:57 AM
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.
0
Richard
Top achievements
Rank 2
answered on 15 Dec 2010, 02:14 PM

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>
0
Accepted
Bozhidar
Telerik team
answered on 15 Dec 2010, 02:46 PM
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.
0
Richard
Top achievements
Rank 2
answered on 15 Dec 2010, 03:30 PM
Perfect.  Thanks!
0
Mike
Top achievements
Rank 1
answered on 28 Mar 2011, 11:23 AM
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
0
Accepted
Bozhidar
Telerik team
answered on 28 Mar 2011, 12:03 PM
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
0
Mike
Top achievements
Rank 1
answered on 28 Mar 2011, 12:13 PM
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
0
Shinu
Top achievements
Rank 2
answered on 28 Mar 2011, 12:32 PM
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.
0
Mike
Top achievements
Rank 1
answered on 28 Mar 2011, 03:45 PM
Thanks.
0
Bozhidar
Telerik team
answered on 28 Mar 2011, 05:03 PM
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
0
Matt
Top achievements
Rank 1
answered on 13 Aug 2019, 02:26 PM
Works but slams the text to the checkbox and the toggle states erase whatever css you applied. Maybe the new versions are better but I'm thinking my solution is to not use Telerik.
0
Attila Antal
Telerik team
answered on 16 Aug 2019, 08:40 AM

Hi Matt,

Could you please tell us which version of Telerik are you using? If I am testing Bozhidar's suggestion, it works perfectly. I can't see any strange behavior.

Kind regards, Attila Antal
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Button
Asked by
Richard
Top achievements
Rank 2
Answers by
Bozhidar
Telerik team
Richard
Top achievements
Rank 2
Mike
Top achievements
Rank 1
Shinu
Top achievements
Rank 2
Matt
Top achievements
Rank 1
Attila Antal
Telerik team
Share this question
or