RadButton width at 100% always edging out ?

2 posts, 0 answers
  1. Stephan Reisinger
    Stephan Reisinger avatar
    24 posts
    Member since:
    Jan 2005

    Posted 08 Mar 2012 Link to this post

    Good afternoon,

    I am using the CSS div layout from 960.gs. Works like a charm with all ASP.Net AJAX controls apart RadButton.

    When I set the button width to 100% to fill the div it always edges out ( see attached image ).

    How can I avoid that ?


  2. Bozhidar
    Bozhidar avatar
    693 posts

    Posted 09 Mar 2012 Link to this post


    The issue occurs because of the default padding-left and padding-right of 4px, that is calculated within the 100% width. In order to remove it, I would suggest to create a CssClass for that case when you want the button to be 100%, and to remove the padding:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head runat="server">
        <style type="text/css">
                padding: 0;
        <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        <div style="width: 200px;">
            <input type="text" style="width: 100%; border: 1px solid #eee; margin-bottom: 5px;" />
            <telerik:RadButton runat="server" ButtonType="LinkButton" Text="Login" Skin="Metro" Width="100%" CssClass="fixedWidth"></telerik:RadButton>

    The padding is necessary for the button when width is auto to prevent text to be merged with the borders. When you set width in pixels for the button the padding is removed, but when it is in percents it is not removed. We have log that issue and it will be fixed. For the time being, you could use the solution above.

    the Telerik team
    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 their blog feed now.
Back to Top