Line-heights in PanelBar Item Template With Form Decorator

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

    Posted 07 Nov 2014 Link to this post

    Hello,
    I have a RadPanelBar that contains Item Templates that are decorated with the RadForm Decorator. We give the user the ability to select different skins for the Item template (using the form decorator) from that of the PanelBar.  The idea is to have independent control over the look of the items vs the containing panel bar.

    The problem I am having is with the line heights of the controls in the Item templates. When the PanelBar is set to one of the touch style skins and the form decorator is set to a non-touch skin, the line heights are too tall creating too much space between rows. Can you tell me how I can override the line-heights that are being inherited from the panelbar skin?

    Thanks.

    <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="WebForm1.aspx.vb" Inherits="CreditAppWizard.WebForm1" %>
     
    <!DOCTYPE html>
     
    <head runat="server">
        <title></title>
    </head>
    <body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        <Scripts>
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js">
            </asp:ScriptReference>
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js">
            </asp:ScriptReference>
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js">
            </asp:ScriptReference>
        </Scripts>
    </telerik:RadScriptManager>
     
    <telerik:RadFormDecorator ID="fdControls" runat="server" DecoratedControls="all" DecorationZoneID="divRFDZone" Skin="Sunset" RenderMode="Lightweight" >
    </telerik:RadFormDecorator>
         
    <div runat="server" id="divRFDZone" class="UserControlDefaults" >
        <telerik:RadPanelBar ID="RadPanelBar1" runat="server" Width="812px" BackColor="White" CausesValidation="true" ValidationGroup="A" Skin="MetroTouch">
            <Items>
            <telerik:RadPanelItem Text="Personal Info" meta:resourcekey="rtPersonalInfoResource1" Expanded="true">
                <ContentTemplate>
                <div runat="server" id="divPageView1InnerDiv" class="OnePageInnerDiv" visible="true">
                    <table class="FieldSetTable" cellpadding="0" cellspacing="0">
                        <tr>
                            <td style="vertical-align:top">
                                <table runat="server" id="table1" cellpadding="0" cellspacing="0" style="margin-top:5px">
                                    <tr>
                                        <td style="padding-bottom:0px; padding-top:0">
                                            <h4 runat="server" id="h4PersonalInfo" style="width:760px; margin:0px" meta:resourcekey="h4PersonalInfoResource1" >Contact Information</h4>
                                        </td>
                                    </tr>
                                </table>
                                <table cellpadding="0" cellspacing="0" style="margin-top:5px">
                                    <tr>
                                        <td style="padding-right:12px">
                                            <label id="lblFname" runat="server" meta:resourcekey="lblFnameResource1" class="LabelText" >First Name:</label>
                                            <br />
                                            <asp:TextBox ID="txtFname" runat="server" Width="180px" onkeypress="javascript:Changed(this);" MaxLength="50" onblur="ForceProper(this);" AutoPostBack="false" ></asp:TextBox>
                                        </td>
                                        <td style="padding-right:12px">
                                            <label id="lblMname" runat="server" meta:resourcekey="lblMnameResource1" class="LabelText" >Middle Name:</label>
                                            <br />
                                            <asp:TextBox ID="txtMname" runat="server" Width="100px" MaxLength="50" onblur="ForceProper(this);" AutoPostBack="false" ></asp:TextBox>
                                        </td>
                                        <td>
                                            <label id="lblLname" runat="server" meta:resourcekey="lblLnameResource1" class="LabelText" >Last Name:</label>
                                            <br />
                                            <asp:TextBox ID="txtLName" runat="server" Width="180px" MaxLength="50" onblur="ForceProper(this);" AutoPostBack="false" ></asp:TextBox>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <table cellpadding="0" cellspacing="0" style="margin-top:2px">
                                    <tr>
                                        <td style="padding-right:12px">
                                            <label runat="server" id="lblHphone" meta:resourcekey="lblHphoneResource1" class="LabelText" >Home Phone:</label>
                                            <br />
                                            <asp:TextBox ID="txtHphone" runat="server" Width="180px" AutoPostBack="false" ></asp:TextBox>
                                        </td>
                                        <td style="padding-right:12px">
                                            <label runat="server" id="lblMphone" meta:resourcekey="lblMphoneResource1" class="LabelText" >Mobile Phone:</label>
                                              <label runat="server" id="lblSameAsLink" class="fauxLink9" style="font-size: 9px"  meta:resourcekey="lblSameAsLinkResource1">Same as Home</label>
                                            <br />
                                            <asp:TextBox ID="txtMphone" runat="server" Width="180px" AutoPostBack="false" ></asp:TextBox>
                                        </td>
                                        <td>
                                            <label id="lblOtherPhone" runat="server" meta:resourcekey="lblOtherPhoneResource1" class="LabelText" >Other Phone:</label>
                                            <label id="lblOtherPhoneReq" runat="server" class="ReqIndicator">*</label>
                                            <br />
                                            <asp:TextBox ID="txtOtherPhone" runat="server" Width="180px" AutoPostBack="false" ></asp:TextBox>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                        <tr>
                            <td style="vertical-align:top">
                                <table cellpadding="0" cellspacing="0" style="margin-top:2px">
                                    <tr>
                                        <td style="padding-right:12px">
                                            <label id="lblEmail" runat="server" meta:resourcekey="lblEmailAddressResource1" class="LabelText" >Email:</label>
                                            <br />
                                            <asp:TextBox ID="txtEmail" runat="server" Width="200px" MaxLength="255" AutoPostBack="false"></asp:TextBox>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                    </table>
                                                     
                </div>
                </ContentTemplate>
            </telerik:RadPanelItem>
            </Items>
        </telerik:RadPanelBar>
    </div>
    </form>
    </body>
    </html>

  2. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1490 posts

    Posted 12 Nov 2014 Link to this post

    Hi Charles,

    You can try the following CSS:
    <style>
        html .RadPanelBar_MetroTouch .rpTemplate {
            line-height: 15px;
        }
    </style>



    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top