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

Buttons overlapping in table cells

1 Answer 86 Views
Button
This is a migrated thread and some comments may be shown as answers.
Chris McGrath
Top achievements
Rank 1
Chris McGrath asked on 24 Feb 2011, 08:20 PM
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.

1 Answer, 1 is accepted

Sort by
0
Accepted
Bozhidar
Telerik team
answered on 25 Feb 2011, 10:36 AM
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!
Tags
Button
Asked by
Chris McGrath
Top achievements
Rank 1
Answers by
Bozhidar
Telerik team
Share this question
or