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