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

SelectedCssClass Background does not work

1 Answer 85 Views
PanelBar
This is a migrated thread and some comments may be shown as answers.
Alex
Top achievements
Rank 1
Alex asked on 13 Jan 2009, 05:50 PM
Using RadPanelBar 2008.3.1125.35

Problem: Background image from SelectedCssClass does not work IF CssClass specifies background image as well. If CssClass does not specify background image - then everything works fine.


I want selected group in RadPanelBar to have different background image (compare to non-selected group). I created following CSS classes and assigned them to SelectedCssClass and CssClass properties.

And it does not work. SelectedCssClass ALWAYS shows background image of the CssClass. If I comment out background definition in the CssClass then I do see new background image - so it looks like a bug in the javascript code that applies SelectedCssClass style.

Any suggestions on how to work around this?

Thank you

--------------

.rootItemSelected
{
    background: url('/styles/rad/PanelBar/HeaderBg-selected.gif') repeat-x;
}

.rootItem
{
    background: url('/styles/rad/PanelBar/HeaderBg.gif') repeat-x;
}

---------

<Items>
                <telerik:RadPanelItem Text="Group1" Expanded="True" SelectedCssClass="rootItemSelected" Selected="true" CssClass="rootItem" >
                    <Items>
                    </Items>
                </telerik:RadPanelItem>
                <telerik:RadPanelItem Text="Group2" Expanded="True" SelectedCssClass="rootItemSelected" CssClass="rootItem"  >
                    <Items>
                    </Items>
                </telerik:RadPanelItem>
            </Items>

1 Answer, 1 is accepted

Sort by
0
Kamen Bundev
Telerik team
answered on 14 Jan 2009, 09:04 AM
Hello Alex,

Thank you for contacting us.

This issue is not exactly a bug. The selected style simply doesn't have enough "weight" to be applied by the browser. To solve it you have to make the selector "heavier" by either using the !important keyword or adding the node type to the selector (this is a preferable solution since !important is too strong and you can need it later). So you can alter your CSS like this:

a.rootItemSelected 
    backgroundurl('/styles/rad/PanelBar/HeaderBg-selected.gif'repeat-x; 
 
.rootItem 
    backgroundurl('/styles/rad/PanelBar/HeaderBg.gif'repeat-x; 

Let me know if this helps.

Kind regards,
Kamen Bundev
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
Tags
PanelBar
Asked by
Alex
Top achievements
Rank 1
Answers by
Kamen Bundev
Telerik team
Share this question
or