Buttons overlapping in table cells

2 posts, 1 answers
  1. Chris McGrath
    Chris McGrath avatar
    23 posts
    Member since:
    Dec 2009

    Posted 24 Feb 2011 Link to this post

    Hi, I've got 5 linkbuttons that I'm using as a visual replacement for radio buttons.  I want them to expand to the width of their container, but when I lay them out in a table, they overlap due to some issue with the CSS, I assume.  Could someone help me fix the CSS so they do not overlap?  Here is my code:

    <div class="box" id="ReductionsBox" runat="Server">
        <div class="boxheader">Reductions</div>
        <table width="100%" cellpadding="0" cellspacing="0" border="0">
            <tr>
                <td><telerik:RadButton ID="NoReductionButton" Text="No Reduction" Checked="True" AutoPostBack="false" Skin="Windows7" ButtonType="LinkButton" GroupName="ReductionType" ToggleType="Radio" Width="100%" runat="server" /></td>
                <td><telerik:RadButton ID="PartialWriteOffButton" Text="Reduce Payoff (Write-Off)" AutoPostBack="false" Skin="Windows7" ButtonType="LinkButton" GroupName="ReductionType" ToggleType="Radio" Width="100%" runat="server" /></td>
                <td><telerik:RadButton ID="PartialWaiveButton" Text="Reduce Payoff (Waive)" AutoPostBack="false" Skin="Windows7" ButtonType="LinkButton" GroupName="ReductionType" ToggleType="Radio" Width="100%" runat="server" /></td>
                <td><telerik:RadButton ID="FullWriteOffButton" Text="Close Case (Write-Off)" AutoPostBack="false" Skin="Windows7" ButtonType="LinkButton" GroupName="ReductionType" ToggleType="Radio" Width="100%" runat="server" /></td>
                <td><telerik:RadButton ID="FullWaiveButton" Text="Close Case (Waive)" AutoPostBack="false" Skin="Windows7" ButtonType="LinkButton" GroupName="ReductionType" ToggleType="Radio" Width="100%" runat="server" /></td>
            </tr>
        </table>
    </div>

    Attached is a screenshot.
  2. Answer
    Bozhidar
    Admin
    Bozhidar avatar
    677 posts

    Posted 25 Feb 2011 Link to this post

    Hi Chris,

    The problem comes form the left and right padding set to the link button in order to have some space around the button text. To fix it, you should overwrite the CSS in the following way:

    <%@ 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">
            a.rbLinkButton
            {
                padding: 0;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <div class="box" id="ReductionsBox" runat="Server">
            <div class="boxheader">
                Reductions</div>
            <table width="100%" cellpadding="0" cellspacing="0" border="0">
                <tr>
                    <td>
                        <telerik:RadButton ID="NoReductionButton" Text="No Reduction" Checked="True" AutoPostBack="false"
                            Skin="Windows7" ButtonType="LinkButton" GroupName="ReductionType" ToggleType="Radio"
                            Width="100%" runat="server" />
                    </td>
                    <td>
                        <telerik:RadButton ID="PartialWriteOffButton" Text="Reduce Payoff (Write-Off)" AutoPostBack="false"
                            Skin="Windows7" ButtonType="LinkButton" GroupName="ReductionType" ToggleType="Radio"
                            Width="100%" runat="server" />
                    </td>
                    <td>
                        <telerik:RadButton ID="PartialWaiveButton" Text="Reduce Payoff (Waive)" AutoPostBack="false"
                            Skin="Windows7" ButtonType="LinkButton" GroupName="ReductionType" ToggleType="Radio"
                            Width="100%" runat="server" />
                    </td>
                    <td>
                        <telerik:RadButton ID="FullWriteOffButton" Text="Close Case (Write-Off)" AutoPostBack="false"
                            Skin="Windows7" ButtonType="LinkButton" GroupName="ReductionType" ToggleType="Radio"
                            Width="100%" runat="server" />
                    </td>
                    <td>
                        <telerik:RadButton ID="FullWaiveButton" Text="Close Case (Waive)" AutoPostBack="false"
                            Skin="Windows7" ButtonType="LinkButton" GroupName="ReductionType" ToggleType="Radio"
                            Width="100%" runat="server" />
                    </td>
                </tr>
            </table>
        </div>
        </form>
    </body>
    </html>


    Greetings,
    Bojo
    the Telerik team
    Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top