Applying background-position to panel item

2 posts, 0 answers
  1. scott
    scott avatar
    2 posts
    Member since:
    Aug 2011

    Posted 12 Dec 2011 Link to this post

    I'm having trouble overriding the style applied to a rad panel item, the css shows that the background-position style is 0px 0px and it is being set from webResource.axd.  I'm trying to apply the "selected" look all the time (which has a background-position settting of 0px -400px.

    I'm using the default skin (ie. no skin is set on the panelBar or panelItem).

    this is a snippet of my page just before the radpanelbar:
    <style type="text/css">   
         .RadPanelBar a.rpLink,
         .RadPanelBar div.rpHeaderTemplate,
         .RadPanelBar a.rpExpanded,
         .RadPanelBar div.rpExpanded,
         .RadPanelBar .rpItem a.rpLinkExpandHovered
         .RadPanelBar_Default DIV.rpExpanded
         {
                   background-position: 0 -400 !important;
                   font: 14px/24px "Segoe UI", Arial, sans-serif;
                   padding-bottom: 0px;
                   padding-top: 0px;
                   background-image: images/button_downloadtopdf.gif;
         }   
         .myStyle DIV.rpExpanded
             {
                    background-position: 0 -400 !important;
                }
                                  
              </style>

    Directly following the style tag I have the following panel bar with the following panel item
    <telerik:RadPanelBar id="pbApplicantDetail" runat="server" Width="782px" OnClientItemClicked="pbApplicantDetail_ItemClicked" BackColor="#FFFFCC" CssClass="myStyle"  >
                                        <Items>
                                            <telerik:RadPanelItem Text="Applicant Details" Value="piApplicantDetail">
                                                <HeaderTemplate>
                                                    <Applicant:Message runat="server" id="UCApplicantDetail"></Applicant:Message>
                                                </HeaderTemplate>
                                            </telerik:RadPanelItem>
                  
                                            <telerik:RadPanelItem runat="server" Text="Rule Information" Visible="true" Expanded="true" BorderStyle="None" Width="779px" CssClass="myStyle" >
                                                <HeaderTemplate>
                                                    <asp:PlaceHolder ID="ruleHeaderPlaceholder" runat="server"></asp:PlaceHolder>
                                                    <%--<RuleHeader:Message runat="server" ID="UCRulesHeader" />--%>
                                                </HeaderTemplate>
                                                <ContentTemplate>
                                                    <%--<asp:PlaceHolder ID="ruleBodyPlaceholder" runat="server"></asp:PlaceHolder>--%>
                                                    <Rules:Message runat="server" id="UCRulesDetail"></Rules:Message>
                                                </ContentTemplate>
                                            </telerik:RadPanelItem>

    I'm looking at getting the style applied to the "Rule Information" panel item in the header.  It always shows up with the background position set to 0px 0px until the header is clicked, then it changes to 0px -400px which is what I want it to always be.  Setting the selected property to true shows it correct, but once it is not selected then it changes back.

  2. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 13 Dec 2011 Link to this post

    Hi Scott,

    To have the desired background position applied to the header of the RadPanelBar you will need to use the following css class selector instead of the one that you currently apply:
    <style type="text/css">
        div.RadPanelBar_Default a.rpLink,
         div.RadPanelBar_Default div.rpHeaderTemplate,
          div.RadPanelBar_Default a.rpExpanded,
           div.RadPanelBar_Default div.rpExpanded,
            div.RadPanelBar_Default .rpItem a.rpLinkExpandHovered {
        background-position: 0 -400px;
    }
         
        </style>

    Regards,
    Kate
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top