CSS problem in 'default' skin

[Marja]

When an option in the panelbar is too long to fit on one line, it correctly wraps to a second line.

However, the CSS for the 'default' skin doesn't take that into account. It only highlights the 1st line. And since the text color is white, the text on the second line is not visible then (white on white).

This issue is not present in all color schemes. WebBlue for instance is just fine.

How can we fix this issue in the 'default' scheme?

[Shinu]

Hi Marja,

As a workaround please try the following CSS which works fine at fine at my end.

CSS:

<style type="text/css">
    .rpSelected
    {
        background-color: #DAF0FC !important;
        font-weight: bold !important;
    }
    .rpSelected:hover
    {
        background-color: #DDF7FF !important;
        font-weight: bold !important;
    }
    .rpSlide .rpItem:hover
    {
        background-color: #DFF5FF !important;
    }
    .rpSlide .rpLink:hover
    {
        background-image: none !important;
    }
    .rpSlide .rpOut:hover
    {
        background-image: none !important;
    }
</style>

Thanks,
Shinu.

[Marja]

Thank you, but that color is wrong and it looks strange for currently selected item. The 1st line is then the original dark grey, and the 2nd line is light blue.

[Shinu]

Hi Marja,

Please do the following modification in the above posted code to achieve your scenario.

CSS:

<style type="text/css">
    .rpSelected
    {
        background-color: Gray !important;
        font-weight: bold !important;
    }
    .rpSlide .rpLink:hover
    {
        background-image: none !important;
    }
    .rpSlide .rpOut:hover
    {
        background-image: none !important;
    }
</style>

Thanks,
Shinu.

[Marja]

Hi Shinu,

Thanks, this is better but still not entirely correct.
When selected, second and subsequent level items keep their dark-gray background image.

I've tried adding "background-image: none !important;"  to ".rpSelected" but that doesn't help.

Do you have any further suggestions?

[Shinu]

Hi Marja,

Please try the below CSS  code which works fine at my end.

CSS:

.RadPanelBar_Default .rpGroup a.rpLink, .RadPanelBar_Default .rpGroup a.rpLink .rpOut
{
    background-image: none !important;
}

Thanks,
Shinu.