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

Header no longer highlighted for open panels after update

4 Answers 102 Views

PanelBar

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

Charles asked on 13 Feb 2016, 03:24 PM

panelbar.png

I just recently upgraded a project to the latest release (2016.1.113) and am experiencing a change in the appearance of panel headers. Prior to the update the header was highlighted with the reverse/selected when open. After the update only the last panel selected is highlighted. We are using the Metro touch skin (this is a mobile site) and the headers are now difficult to distinguish from the content. Please see the attached screen shot. How do I restore this to have the panel header always highlighted? here is my markup code:

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="XPanelBarTest.aspx.vb" Inherits="mobile.autoclick.com.XPanelBarTest" %>

<!DOCTYPE html>

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

<head runat="server">

<title></title>

<style type="text/css">

html .RadPanelBar_MetroTouch .rmRootToggle {

height:25px;

width:24px;

}

html .RadPanelBar_MetroTouch .rmRootToggle:before {

font-size:18px;

}

html .RadPanelBar_MetroTouch .rpTemplate

{

line-height: 18px;

}

html .RadPanelBar_BlackMetroTouch .rpTemplate

{

line-height: 18px;

}

</style>

<script type="text/javascript" src="/jquery/jquery-1.9.1.min.js"></script>

<script type="text/javascript" src="/js/plupload.full.min.js"></script>

<script type="text/javascript" src="/js/jquery.plupload.queue/jquery.plupload.queue.js"></script>

</head>

<body>

<form id="form1" runat="server">

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">

</telerik:RadScriptManager>

<telerik:RadPanelBar ID="RadPanelBar1" runat="server" Width="99%" Skin="MetroTouch">

<Items>

<telerik:RadPanelItem Text="Photos">

<ContentTemplate>

<div style="overflow:hidden">

<div id="container" >

<telerik:RadButton ID="radbtnAddPhoto" runat="server" Text="Add New Photos" Width="99%" ></telerik:RadButton>

</div>

<telerik:RadButton ID="radbtnVehicleNotSaved" runat="server" Text="Please save the vehicle before adding photos." Width="99%" Enabled="false"></telerik:RadButton>

</div>

</ContentTemplate>

</telerik:RadPanelItem>

<telerik:RadPanelItem Text="Description" >

<ContentTemplate>

<div style="overflow:hidden">

<fieldset>

<telerik:RadAjaxPanel ID="RadAjaxPanel2" runat="server">

<table class="fieldsetTable" >

<tr>

<td style="padding-top:2px; padding-right:8px; padding-bottom:8px" colspan="2">

<telerik:RadButton ID="radbtnScanner" runat="server" Text="Scan VIN" ButtonType="LinkButton" CssClass="fieldsetTable" ></telerik:RadButton>

<telerik:RadButton ID="radbtnDecodeVin" runat="server" Text="Decode VIN" ></telerik:RadButton>

</td>

</tr>

<tr>

<td class="lablecell_1">

VIN:<span class="Reqd">*</span>

</td>

<td class="tablecell">

<asp:TextBox runat="server" ID="txtVin" Width="200px" CssClass="tdText" MaxLength="21"></asp:TextBox>

<telerik:RadWindow ID="radwinSelectTrimLevel" runat="server" Title="Select Trim Level" Width="290px" Behaviors="Move, Close, Resize" Skin="MetroTouch" Modal="true" CenterIfModal="true">

<ContentTemplate>

<table style="margin:10px; width:96%">

<tr>

<td>

<label runat="server" id="lblPopupCommentsLabel" class="tdText">Please Select A Trim Level:</label>

</td>

</tr>

<tr>

<td>

<asp:RadioButtonList ID="rblistTrimLevels" runat="server" Width="90%" CssClass="rbtext" style="line-height:30px"></asp:RadioButtonList>

</td>

</tr>

<tr>

<td style="text-align:center">

<telerik:RadButton ID="rdbTrimLevelOK" runat="server" Text="OK" Width="90px"></telerik:RadButton>

</td>

</tr>

</table>

</ContentTemplate>

</telerik:RadWindow>

</td>

</tr>

</table>

</telerik:RadAjaxPanel>

</fieldset>

</div>

</ContentTemplate>

</telerik:RadPanelItem>

<telerik:RadPanelItem Text="Status">

<ContentTemplate>

<div style="overflow:hidden">

<table style="margin:5px">

<tr>

<td style="width:100%">

<table class="fieldsetTable">

<tr>

<td class="tablecell" colspan="2">

<asp:CheckBox runat="server" ID="cbShowOnLine" Text="Show On Line:" TextAlign="Left" />

</td>

</tr>

<tr>

<td style="width:44px">

New/Used:<span class="Reqd">*</span>

</td>

<td class="tablecell">

<asp:DropDownList runat="server" ID="ddNewUsed" CssClass="dropdownText">

<asp:ListItem Text="-- New/Used --" Value="2"></asp:ListItem>

<asp:ListItem Text="New" Value="1"></asp:ListItem>

<asp:ListItem Text="Used" Value="0"></asp:ListItem>

</asp:DropDownList>

</td>

</tr>

<tr>

<td>

Status:<span class="Reqd">*</span>

</td>

<td class="tablecell">

</td>

</tr>

<tr>

<td>

Condition:<span class="Reqd">*</span>

</td>

<td class="tablecell">

</td>

</tr>

</table>

</td>

</tr>

<tr>

<td style="text-align:right" colspan="2">

<span class="fieldsetTable">* Required</span>

</td>

</tr>

</table>

</div>

</ContentTemplate>

</telerik:RadPanelItem>

<telerik:RadPanelItem Text="Price">

<ContentTemplate>

<div style="overflow:hidden">

<table class="fieldsetTable" style="margin:5px">

<tr>

<td valign="top" style="width: 50%;">

<table class="fieldsetTable" style="width:100%">

<tr>

<td class="tablecell">

List:<br />

<asp:TextBox runat="server" ID="txtListPrice" Width="100px" CssClass="tdText numberTextBox"></asp:TextBox>

</td>

</tr>

<tr>

<td class="tablecell">

Markup (Pack):<br />

<asp:TextBox runat="server" ID="txtMarkup" Width="100px" CssClass="tdText numberTextBox"></asp:TextBox>

</td>

</tr>

</table>

</td>

<td valign="top" style="width: 50%;">

<table class="fieldsetTable" style="width:100%">

<tr>

<td class="tablecell">

Cost/ACV:<br />

<asp:TextBox runat="server" ID="txtCostACV" Width="100px" CssClass="tdText numberTextBox"></asp:TextBox>

</td>

</tr>

<tr>

<td class="tablecell">

Advertised Price:<br />

<asp:TextBox runat="server" ID="txtAdvertisedPrice" Width="100px" CssClass="tdText numberTextBox"></asp:TextBox>

</td>

</tr>

</table>

</td>

</tr>

<tr>

<td valign="middle" colspan="2" style="padding-top:4px">

Custom Price Text - overrides vehicle price (70 characters max):<br />

<asp:TextBox runat="server" ID="txtCustomPriceText" Width="98%" CssClass="tdText" TextMode="MultiLine" Rows="2" Height="30px"></asp:TextBox>

</td>

</tr>

</table>

</div>

</ContentTemplate>

</telerik:RadPanelItem>

<telerik:RadPanelItem Text="Equipment">

<ContentTemplate>

<div style="overflow:hidden">

<telerik:RadAjaxPanel ID="RadAjaxPanel3" runat="server" >

<div style="margin:5px">

<asp:TextBox runat="server" ID="txtEquipment" Width="99%" Height="80px" CssClass="tdText"

TextMode="MultiLine"></asp:TextBox><br />

<asp:Panel ID="panelOptions" runat="server" Visible="false" Width="99%">

Additional Optional Equipment (check all that apply):<br />

</asp:Panel>

</div>

</telerik:RadAjaxPanel>

</div>

</ContentTemplate>

</telerik:RadPanelItem>

<telerik:RadPanelItem Text="Web Description / Video">

<ContentTemplate>

<div style="overflow:hidden">

<div style="margin:5px">

<span class="fieldsetTable">Description On Web:</span><br />

<asp:TextBox runat="server" ID="txtWebDescription" Width="98%" Height="106px" CssClass="tdText"

TextMode="MultiLine"></asp:TextBox> <br />

<asp:CheckBox runat="server" ID="cbUseAutoclickImages" Text="Use Autoclick Images" CssClass="fieldsetTable" />

<br /><br />

<span class="fieldsetTable">Embeded Video:</span><br />

<asp:Button ID="btnPasteVideoCode" runat="server" CssClass="tdText" Text="Paste Embedded Code" Width="164px" OnClientClick="PasteFromClipboard(); return false;" />

<asp:Button ID="btnClearVideoCode" runat="server" CssClass="tdText" Text="Clear" Width="55px" OnClientClick="ClearVideoCode(); return false;" /><br />

<asp:TextBox runat="server" ID="txtVideoLink" Width="98%" Height="70px" CssClass="tdText" ForeColor="DarkGray"

ReadOnly="false" TextMode="MultiLine" onchange="javascript:VideoCodeChanged(this);"

ToolTip=

"Upload your video to Youtube then click the 'Embed' button and copy and paste the code into this field. Your video will appear on the Vehicle Detail page."

></asp:TextBox>

</div>

</ContentTemplate>

</telerik:RadPanelItem>

</Items>

</telerik:RadPanelBar>

</form>

</body>

</html>

Thanks.

Charles

4 Answers, 1 is accepted

answered on 17 Feb 2016, 06:00 PM

Hello Charles,

You can use the following CSS rule in order to highlight all the expanded PanelBar root items:

html .RadPanelBar_MetroTouch .rpRootLink.rpExpanded,

html .RadPanelBar_MetroTouch .rpHeaderTemplate.rpExpanded {

border-color: #25a0da;

color: #fff;

background-color: #25a0da;

}

Regards,
Ivan Danchev
Telerik

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items

answered on 19 May 2016, 10:55 AM

Hello Charles,

Because of the selector (.RadPanelBar_MetroTouch) used in the previously suggested CSS rule, the rule will apply only to a PanelBar that has the MetroTouch skin set. In order to apply the rule to a PanelBar regardless of the skin set you can change the selector to the following one:

html .RadPanelBar .rpRootLink.rpExpanded,

html .RadPanelBar .rpHeaderTemplate.rpExpanded {

border-color: #25a0da;

color: #fff;

background-color: #25a0da;

}

Regards,
Ivan Danchev
Telerik

Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.