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

RadButton Text center Alignment issue.

1 Answer 309 Views
Button
This is a migrated thread and some comments may be shown as answers.
Riz
Top achievements
Rank 1
Riz asked on 29 Dec 2015, 01:40 PM

Hello Telerik team,

We are extensively used Rad Controls within our asp.net web based application.The Telerik Version we are currently using within our application is :2014.2.724.45

Recently we noticed one major issue for all RadButtons that are available throughout the application. The issue is,  whenever we set width of Radbutton from markup or code behind then it automatically applies "padding-left:4px" to internal input at the time of rendering. Due to this padding, the text of Button is not appearing exactly at the center.

Whenever we give custom width to the RadButton from Markup or code behind, the <span> tag comes with a specified width , 1st <input> comes with style  "width:100%;padding-left:0;padding-right:0;padding-left:4px;height:28px" ;

As shown above, the main issue is caused by "padding-left:4px". We want to set it 0px after which then the text would appear center align on our end.

Below are the code snippet for our above issue:

.aspx page:

<myTelerik:RadButton Height="28px" ID="btnEdit" Width="90px" EnableEmbeddedSkins="false" Skin="Strong" runat="server" Text="Edit " ValidationGroup="Edit" OnClick="btnEdit_Click" />

Below code renders on Browser

<span id="ctl00_ContentPlaceHolder1_btnEdit" class="RadButton" style="padding:0px !important;display:inline-block;height:28px;width:75px;height:28px;" tabindex="0">
    <input class="rbDecorated" type="button" name="ctl00$ContentPlaceHolder1$btnEdit_input" id="ctl00_ContentPlaceHolder1_btnEdit_input" value="Delete" style="width:100%;padding-left:0;padding-right:0;padding-left:4px;height:28px;" tabindex="-1">
<input id="ctl00_ContentPlaceHolder1_btnEdit_ClientState" name="ctl00_ContentPlaceHolder1_btnEdit_ClientState" type="hidden" autocomplete="off">
</span>

Please provide us workaround how we can remove the "padding-left:4px" for all those RadButtons which having custom width. We need the generic way to resolve this issue so that it requires minimum numbers of files need to be updated.

Please note that this issue is only encounters only when we applies custom width to RadButton. For other RadButtons where custom width is not applied, the text appears at center. We are trying to do the same, but we are not getting expected output.

Thanks,
Riz

1 Answer, 1 is accepted

Sort by
0
Danail Vasilev
Telerik team
answered on 04 Jan 2016, 07:09 AM
Hi Riz,

I would suggest that you upgrade to the latest Telerik UI version (2015.3.1111) where the issue with the text alignment is fixed.

Regards,
Danail Vasilev
Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Tags
Button
Asked by
Riz
Top achievements
Rank 1
Answers by
Danail Vasilev
Telerik team
Share this question
or