SelectedCssClass Background does not work

[Alex]

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>

[Kamen Bundev]

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
{
    background: url('/styles/rad/PanelBar/HeaderBg-selected.gif') repeat-x;
}

.rootItem
{
    background: url('/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.