Header no longer highlighted for open panels after update

5 posts, 0 answers
  1. Charles
    Charles avatar
    30 posts
    Member since:
    Feb 2013

    Posted 13 Feb Link to this post

    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>
     
    <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>                   
     
                        </div>
                        </ContentTemplate>
                    </telerik:RadPanelItem>
                </Items>
            </telerik:RadPanelBar>
     
        </form>
    </body>
    </html>
     

    Thanks.

    Charles

  2. Ivan Danchev
    Admin
    Ivan Danchev avatar
    829 posts

    Posted 17 Feb Link to this post

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Charles
    Charles avatar
    30 posts
    Member since:
    Feb 2013

    Posted 16 May Link to this post

    This has come up again in a different application. The work around with the CSS rule (posted above) worked when the skin is known. However in this application the skin is not know (the user can select different skins). Is there a better way to restore this functionality?

     

    Charles Hart

  5. Charles
    Charles avatar
    30 posts
    Member since:
    Feb 2013

    Posted 16 May Link to this post

    Never mind. It turns out only three of the skins are affected so I just added the css for those three.

     

    Charles

  6. Ivan Danchev
    Admin
    Ivan Danchev avatar
    829 posts

    Posted 19 May Link to this post

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