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

Buttons overlapping in table cells

1 Answer 357 Views

Button

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

Chris McGrath asked on 24 Feb 2011, 08:20 PM

Region-Capture.jpg

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

Accepted

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

<html xmlns="http://www.w3.org/1999/xhtml">

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