RadButton Text center Alignment issue.

2 posts, 0 answers
  1. Riz
    Riz avatar
    10 posts
    Member since:
    Jun 2013

    Posted 29 Dec 2015 Link to this post

    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">

    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.


  2. Danail Vasilev
    Danail Vasilev avatar
    1476 posts

    Posted 04 Jan Link to this post

    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.

    Danail Vasilev
    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
  3. DevCraft R3 2016 release webinar banner
Back to Top