Spacing Around Skinned Rad Controls

3 posts, 0 answers
  1. Charles
    Charles avatar
    6 posts
    Member since:
    May 2008

    Posted 30 Oct 2014 Link to this post

    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. Charles
    Charles avatar
    6 posts
    Member since:
    May 2008

    Posted 30 Oct 2014 in reply to Charles Link to this post

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1490 posts

    Posted 03 Nov 2014 Link to this post

    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.
Back to Top