Spacing Around Skinned Rad Controls

[Charles]

I have a mix of Rad controls and asp controls inside a RadPanelBar with template in an item. My problem is that the skinned Rad Controls have more space around them than the asp controls causing a misalignment when side by side. I have tried a bunch of things to correct this but no joy. Here is the markup:

<tr>
<td>
<table cellpadding="0" cellspacing="0">
<tr>
<td style="padding-right:12px">
<label id="lblDriversLicenseNumber" runat="server" meta:resourcekey="lblDriversLicenseNumberResource1" class="LabelText" >Drivers License/ID Number:</label>
<label id="lblDriversLicenseNumberReq" runat="server" class="ReqIndicator">*</label>
<asp:RequiredFieldValidator ID="rfvDriversLicenseNumber" runat="server" Display="Dynamic" CssClass="ValidationText" ValidationGroup="A"
ControlToValidate="txtDriversLicenseNumber" ErrorMessage="Required"
meta:resourcekey="rfvResource1"></asp:RequiredFieldValidator><br />
<asp:TextBox ID="txtDriversLicenseNumber" runat="server" Width="210px" MaxLength="25"></asp:TextBox>
</td>
<td style="padding-right:12px">
<label id="lblDriversLicenseState" runat="server" meta:resourcekey="lblDriversLicenseStateResource1" class="LabelText" >State:</label>
<label id="lblDriversLicenseStateReq" runat="server" class="ReqIndicator">*</label>
<asp:RequiredFieldValidator ID="rfvDriversLicenseState" runat="server" Display="Dynamic" CssClass="ValidationText" ValidationGroup="A"
ControlToValidate="ddlDriversLicenseState" ErrorMessage="Reqd" InitialValue="--"
meta:resourcekey="rfvResource2"></asp:RequiredFieldValidator><br />
<telerik:RadComboBox ID="ddlDriversLicenseState" runat="server" Width="60px" RenderMode="Lightweight" style="margin-top:0px; padding-top:0px" >
<Items>
<telerik:RadComboBoxItem Text="--" Value="" />
<telerik:RadComboBoxItem Value="AL" Text="AL" />
<telerik:RadComboBoxItem Value="AZ" Text="AZ" />
<telerik:RadComboBoxItem Value="AR" Text="AR" />
<telerik:RadComboBoxItem Value="CA" Text="CA" />
<telerik:RadComboBoxItem Value="CO" Text="CO" />
<telerik:RadComboBoxItem Value="CT" Text="CT" />
<telerik:RadComboBoxItem Value="DE" Text="DE" />
<telerik:RadComboBoxItem Value="DC" Text="DC" />
<telerik:RadComboBoxItem Value="FL" Text="FL" />
<telerik:RadComboBoxItem Value="GA" Text="GA" />
<telerik:RadComboBoxItem Value="ID" Text="ID" />
<telerik:RadComboBoxItem Value="IL" Text="IL" />
<telerik:RadComboBoxItem Value="IN" Text="IN" />
<telerik:RadComboBoxItem Value="IA" Text="IA" />
<telerik:RadComboBoxItem Value="KS" Text="KS" />
<telerik:RadComboBoxItem Value="KY" Text="KY" />
<telerik:RadComboBoxItem Value="LA" Text="LA" />
<telerik:RadComboBoxItem Value="ME" Text="ME" />
<telerik:RadComboBoxItem Value="MD" Text="MD" />
<telerik:RadComboBoxItem Value="MA" Text="MA" />
<telerik:RadComboBoxItem Value="MI" Text="MI" />
<telerik:RadComboBoxItem Value="MN" Text="MN" />
<telerik:RadComboBoxItem Value="MS" Text="MS" />
<telerik:RadComboBoxItem Value="MO" Text="MO" />
<telerik:RadComboBoxItem Value="MT" Text="MT" />
<telerik:RadComboBoxItem Value="NE" Text="NE" />
<telerik:RadComboBoxItem Value="NV" Text="NV" />
<telerik:RadComboBoxItem Value="NH" Text="NH" />
<telerik:RadComboBoxItem Value="NJ" Text="NJ" />
<telerik:RadComboBoxItem Value="NM" Text="MN"/>
<telerik:RadComboBoxItem Value="NY" Text="NY" />
<telerik:RadComboBoxItem Value="NC" Text="NC" />
<telerik:RadComboBoxItem Value="ND" Text="ND" />
<telerik:RadComboBoxItem Value="OH" Text="OH" />
<telerik:RadComboBoxItem Value="OK" Text="OK" />
<telerik:RadComboBoxItem Value="OR" Text="OR" />
<telerik:RadComboBoxItem Value="PA" Text="PA" />
<telerik:RadComboBoxItem Value="PR" Text="PR" />
<telerik:RadComboBoxItem Value="RI" Text="RI" />
<telerik:RadComboBoxItem Value="SC" Text="SC" />
<telerik:RadComboBoxItem Value="SD" Text="SD" />
<telerik:RadComboBoxItem Value="TN" Text="TN" />
<telerik:RadComboBoxItem Value="TX" Text="TX" />
<telerik:RadComboBoxItem Value="UT" Text="UT" />
<telerik:RadComboBoxItem Value="VI" Text="VI" />
<telerik:RadComboBoxItem Value="VT" Text="VT" />
<telerik:RadComboBoxItem Value="VA" Text="VA" />
<telerik:RadComboBoxItem Value="WA" Text="WA" />
<telerik:RadComboBoxItem Value="WV" Text="WV" />
<telerik:RadComboBoxItem Value="WI" Text="WI" />
<telerik:RadComboBoxItem Value="WY" Text="WY" />
</Items>
</telerik:RadComboBox>
</td>
<td style="padding-right:12px">
<label id="lblDriversLicenseExpDate" runat="server" meta:resourcekey="lblDriversLicenseExpDateResource1" class="LabelText" >Expires:</label>
<label id="lblDriversLicenseExpDateReq" runat="server" class="ReqIndicator">*</label>
<asp:RequiredFieldValidator ID="rfvDriversLicenseExpDate" Display="Dynamic" CssClass="ValidationText" ValidationGroup="A"
runat="server" ErrorMessage="Required" ControlToValidate="rdiDriversLicenseExpDate"
meta:resourcekey="rfvResource1" ></asp:RequiredFieldValidator><br />
<telerik:RadDateInput ID="rdiDriversLicenseExpDate" runat="server" Width="100px" DateFormat="d" >
</telerik:RadDateInput>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</ContentTemplate>
</telerik:RadPanelItem>
<telerik:RadPanelItem Text="Residence" Expanded="true" meta:resourcekey="rtResidenceResource1">
<ContentTemplate>
<div runat="server" id="divPageView2InnerDiv" class="OnePageInnerDiv" visible="true">

<table class="FieldSetTable" cellpadding="0" cellspacing="0">
<tr>
<td style="vertical-align:top">
<table runat="server" id="tablePresAddressHead" cellpadding="0" cellspacing="0" style="margin-top:5px">
<tr>
<td style="padding-bottom:0px; padding-top:0">
<h4 runat="server" id="h4PresentAddress" style="width:760px; margin:0px" meta:resourcekey="h4PresentAddressResource1" >Present Address</h4>
</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" style="margin-top:5px">
<tr>
<td style="padding-right:12px">
<label id="lblStreetNumber" runat="server" meta:resourcekey="lblStreetNumberResource1" class="LabelText">Street #:</label>
<label id="lblStreetNumberReq" runat="server" class="ReqIndicator">*</label>
<asp:RequiredFieldValidator ID="rfvStreetNumber" runat="server" Display="Dynamic" CssClass="ValidationText" ValidationGroup="A"
ControlToValidate="txtStreetNumber" ErrorMessage="Reqd"
meta:resourcekey="rfvResource2"></asp:RequiredFieldValidator><br />
<asp:TextBox ID="txtStreetNumber" runat="server" Width="80px" MaxLength="10"></asp:TextBox>
</td>
<td style="padding-right:12px">
<label id="lblStreetName" runat="server" meta:resourcekey="lblStreetNameResource1" class="LabelText">Street Name:</label>
<label id="lblStreetNameReq" runat="server" class="ReqIndicator">*</label>
<asp:RequiredFieldValidator ID="rfvStreetName" runat="server" Display="Dynamic" CssClass="ValidationText" ValidationGroup="A"
ControlToValidate="txtStreetName" ErrorMessage="Required"
meta:resourcekey="rfvResource1"></asp:RequiredFieldValidator><br />
<asp:TextBox ID="txtStreetName" runat="server" Width="220px" MaxLength="50" onblur="ForceProper(this);" ></asp:TextBox>
</td>
<td style="padding-right:12px">
<label id="lblApt" runat="server" meta:resourcekey="lblAptResource1" class="LabelText">Apt/Unit:</label>
<label id="lblAptReq" runat="server" class="ReqIndicator">*</label>
<asp:RequiredFieldValidator ID="rfvApt" runat="server" Display="Dynamic" CssClass="ValidationText" ValidationGroup="A"
ControlToValidate="txtApt" ErrorMessage="Reqd"
meta:resourcekey="rfvResource2"></asp:RequiredFieldValidator><br />
<asp:TextBox ID="txtApt" runat="server" Width="80px" MaxLength="10"></asp:TextBox>
</td>
<td style="padding-left:52px">
<table cellpadding="0" cellspacing="0">
<tr>
<td style="padding-right:12px">
<label id="lblPresLived" runat="server" meta:resourcekey="lblPresLivedResource1" class="LabelText">Time at this Address:</label>
<label id="lblPresLivedReq" runat="server" class="ReqIndicator">*</label>
<asp:CustomValidator id="cvPresLived" runat="server" Display="Dynamic" CssClass="ValidationText" ValidationGroup="A"
ErrorMessage = "Reqd" ClientValidationFunction="ValidatePresLived" ></asp:CustomValidator><br />
<telerik:RadNumericTextBox ID="rniPresLived" runat="server" Width="70px"
Type="Number" NumberFormat-DecimalDigits="0" EmptyMessage="Years" MaxValue="100" MinValue="0" ></telerik:RadNumericTextBox>&nbsp;&nbsp;
<telerik:RadNumericTextBox ID="rniPresLivedMonths" runat="server" Width="70px"
Type="Number" NumberFormat-DecimalDigits="0" EmptyMessage="Months" MaxValue="11" MinValue="0" ></telerik:RadNumericTextBox>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>

[Charles]

How do I control spacing around the skinned controls. Oh, I forgot to mention the whole thing is in a div with a form decorator applied.

Thanks

CHarles

[Danail Vasilev]

Hi Charles,

This issue is not related to RadFormDecorator and can also be reproduced on page that doesn't contain RadFormDecorator. After examining the provided code snippet it seems that there is a left-padding of 52px for the last td of the second inner table in the second RadPanelItem. After removing this padding the spacing issue got resolved:

ASPX:

<td style="padding-left: 0px">
    <table cellpadding="0" cellspacing="0">
        <tr>
            <td style="padding-right: 12px">
                <label id="lblPresLived" runat="server" meta:resourcekey="lblPresLivedResource1" class="LabelText">Time at this Address:</label>
                <label id="lblPresLivedReq" runat="server" class="ReqIndicator">*</label>
                <asp:CustomValidator ID="cvPresLived" runat="server" Display="Dynamic" CssClass="ValidationText" ValidationGroup="A"
                    ErrorMessage="Reqd" ClientValidationFunction="ValidatePresLived"></asp:CustomValidator><br />
                <telerik:RadNumericTextBox ID="rniPresLived" runat="server" Width="70px"
                    Type="Number" NumberFormat-DecimalDigits="0" EmptyMessage="Years" MaxValue="100" MinValue="0">
                </telerik:RadNumericTextBox>
                <telerik:RadNumericTextBox ID="rniPresLivedMonths" runat="server" Width="70px"
                    Type="Number" NumberFormat-DecimalDigits="0" EmptyMessage="Months" MaxValue="11" MinValue="0">
                </telerik:RadNumericTextBox>
            </td>
        </tr>
    </table>
</td>

You can also find the modified version of the provided code snippet in the attached archive.

Regards,
Danail Vasilev
Telerik