Q2.2013: Button text isn't centered correctly anymore.

9 posts, 0 answers
  1. Martin Horst
    Martin Horst avatar
    39 posts
    Member since:
    Apr 2010

    Posted 30 Aug 2013 Link to this post

    Hi,

    today I switch to the Q2 2013 version and in many styles (like Office2010Blue) the text inside the button isn't centered correctly anymore. I looked into the rendered HTML code and I found the following style inside the button:

    style="width:100%;padding-left:0;padding-right:0;padding-left:4px;"

    I'm not sure if this is a design bug or a feature or if I have to do something to change this. But the two padding-left styles look a little bit strange for me.
    So, is there any way to center the text correctly again!?

    Best regards
    Martin Horst





  2. Bozhidar
    Admin
    Bozhidar avatar
    677 posts

    Posted 02 Sep 2013 Link to this post

    Hello,

    From you description I can't understand what the problem should be. It would be nice if you could provide the code you are using to set you button and a screenshot showing the problem.

    I have checked the Button demo page and as I could see the text is centered as expected.

    Do you have any custom styles applied to the button that could change something inside the button? If yes, try to remove them and check if everything is fine.

    Regards,
    Bozhidar
    Telerik
    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 the blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 02 Sep 2013 Link to this post

    Hi Martin,

    Unfortunately I couldn't replicate this issue at my end. You can try the following CSS to set the text position to center.

    CSS:
    <style type="text/css">
        .RadButton_Office2010Blue .rbDecorated
        {
            text-align: center !important;
        }
    </style>

    Thanks,
    Princy.
  5. Martin Horst
    Martin Horst avatar
    39 posts
    Member since:
    Apr 2010

    Posted 02 Sep 2013 Link to this post


    Hi,

    I did the following test: I created an simple aspx webpage and I only added the RAD scriptmanager and a single RadButton Control:

    <telerik:RadButton ID="radButtonLogin" runat="server" Text="Anmelden"
      Width="120px" onclick="radButtonLogin_Click"></telerik:RadButton>

    And here is the resulting html:

    <span id="ctl00_AdeleContent_radButtonLogin" class="RadButton RadButton_Office2010Blue rbSkinnedButton" style="display:inline-block;width:120px;"><input class="rbDecorated" type="button" name="ctl00$AdeleContent$radButtonLogin_input" id="ctl00_AdeleContent_radButtonLogin_input" value="Anmelden" style="width:100%;padding-left:0;padding-right:0;padding-left:4px;" /><input id="ctl00_AdeleContent_radButtonLogin_ClientState" name="ctl00_AdeleContent_radButtonLogin_ClientState" type="hidden" /></span>
          </div>

    As you can see there is still the "padding-left:4px" style insinde. I going to try the given css entry, maybe this will fix my problem.

    Best regards
    Martin

  6. Martin Horst
    Martin Horst avatar
    39 posts
    Member since:
    Apr 2010

    Posted 02 Sep 2013 Link to this post

    Hi,

    i added a workaround in my css file and now the text ist centered correctly again.
    I used a modified version from "Princy" css exampled:

    .RadButton_Office2010Blue .rbDecorated
    {
      padding-right: 4px !important;
    }
     
    But I still would like to know what is causing this problem.

    Best ragards
    Martin
  7. Bozhidar
    Admin
    Bozhidar avatar
    677 posts

    Posted 03 Sep 2013 Link to this post

    Hi,

    I have tested your scenario and I could confirm the bug. I tried three different approaches and found the problem occurs only when you set width property to the button. If you use CssClass and styles the problem does not exist - bellow are the three button from my test:

    <!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">
            .button-width {
                width: 120px;
            }
             
            .button-width .rbDecorated {
                width: 100%;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        </telerik:RadScriptManager>
        <telerik:RadSkinManager runat="server" ShowChooser="true">
        </telerik:RadSkinManager>
        <br />
        <br />
        <telerik:RadButton ID="radButtonLogin" runat="server" Text="Anmelden" CssClass="button-width">
        </telerik:RadButton>
        <br /><br />
        <telerik:RadButton ID="radButton1" runat="server" Text="Anmelden">
        </telerik:RadButton>
        <br /><br />
        <telerik:RadButton ID="radButton2" runat="server" Text="Anmelden" Width="120">
        </telerik:RadButton>
        </form>
    </body>
    </html>

    As you could see, for some reason, when you apply width property, the button applies to the inner input element some inline styles that overrides the the base styles for the button. We made some changes in the styles and rendering few releases ago, and it could be an old behavior that was relevant for the old rendering and left unchanged accidentally. I will check that with our developers to inspect why exactly the inline styles are appeared and should the be removed.

    Regards,
    Bozhidar
    Telerik
    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 the blog feed now.
  8. Martin Horst
    Martin Horst avatar
    39 posts
    Member since:
    Apr 2010

    Posted 03 Sep 2013 Link to this post

    Hi,

    thanks for your answer. I can live with the padding-right workaround i added to the css. It's good to know that this issue will be addressed in future releases. Thanks again for your help!

    Best regards
    Martin
  9. Ludek
    Ludek avatar
    3 posts
    Member since:
    Jul 2008

    Posted 09 Apr 2014 Link to this post

    Hi,
    did you solve this issue somehow on Telerik side?
    I have Q1 2014 installed and the bug still occurs...
  10. Bozhidar
    Admin
    Bozhidar avatar
    677 posts

    Posted 11 Apr 2014 Link to this post

    Hello,

    Thanks for contacting Telerik support. The issue is not fixed yet as it was considered as a minor one and we are working on issues that could be blocking and are with a higher priority. Of course it is still in our to do list and it will be fixed together with several other minor issues for RadButton. This is the issue feedback item where you could track its status and to vote about it and this way to increase the item priority.

    Regards,
    Bozhidar
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017