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

Spacing Around Skinned Rad Controls

2 Answers 41 Views
FormDecorator
This is a migrated thread and some comments may be shown as answers.
Charles
Top achievements
Rank 1
Charles asked on 30 Oct 2014, 09:11 PM
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>

2 Answers, 1 is accepted

Sort by
0
Charles
Top achievements
Rank 1
answered on 30 Oct 2014, 09:13 PM
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
0
Danail Vasilev
Telerik team
answered on 03 Nov 2014, 03:53 PM
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
 
Explore the entire set of ASP.NET AJAX controls we offer here and browse the myriad online demos to learn more about the components and the features they incorporate.
Tags
FormDecorator
Asked by
Charles
Top achievements
Rank 1
Answers by
Charles
Top achievements
Rank 1
Danail Vasilev
Telerik team
Share this question
or