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

Line-heights in PanelBar Item Template With Form Decorator

1 Answer 71 Views

FormDecorator

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

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>

<html xmlns="http://www.w3.org/1999/xhtml">

<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>

Line-heights in PanelBar Item Template With Form Decorator

1 Answer, 1 is accepted