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

Line-heights in PanelBar Item Template With Form Decorator

1 Answer 33 Views
FormDecorator
This is a migrated thread and some comments may be shown as answers.
Charles
Top achievements
Rank 1
Charles asked on 07 Nov 2014, 04:40 PM
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>

1 Answer, 1 is accepted

Sort by
0
Danail Vasilev
Telerik team
answered on 12 Nov 2014, 09:22 AM
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.
Tags
FormDecorator
Asked by
Charles
Top achievements
Rank 1
Answers by
Danail Vasilev
Telerik team
Share this question
or