Help with PanelBar styling

[Luke Kasper]

All,

I'm having an issue with my PanelBar header links or whatever they're called.  I have two panel items. The background for the text in the panel should be Yellow for my active panel and Blue for my inactive panel.  I've attached a screenshot of what I'm getting.  I'm getting a white space above the correct background for each of these.  Is there a css setting I'm missing or have incorrect somewhere?  I've modified as many items in the .rpExpanded, .rpExpandable and .rpLink classes that I could think of, but I can't seem to figure it out. 

Any help would be greatly appreciated.

[Nikolay Tsenkov]

Hi Luke Kasper,

Could you, please, post the current state of the implementation for this requirement?
I will look in the css and will try to resolve this for you!

Hope that soon we will solve it!


Regards,
Nikolay Tsenkov
the Telerik team

[Luke Kasper]

Actually, I am trying to use the default PanelBar.css file that comes in the downloadable .zip file.  I can repost it here if you need me to.


Edit: I was using a customized .css file; I thought I had it switched.  I'm going to see if I can post the customized .css file.

[Luke Kasper]

Here's the .css we're using.  Comparing it to the default one, I see there are a lot of differences.  Do you think the problem could be in the class naming scheme?

.RadPanelBar_CustomBasic
{
    background: #FFFFFF;
}

.RadPanelBar_CustomBasic .rpLink
{
    border: 1px solid #000000;
    overflow-x: hidden;
}

.RadPanelBar_CustomBasic .rpText
{
    margin-right: 7px;
    overflow-x: hidden;
}

.RadPanelBar_CustomBasic .rpExpandable .rpText
{
    background: transparent url('../../../Images/expand_blue.jpg') no-repeat;
    background-position:580px center;
    background-color: #003084;
    color: #FFFFFF;
    width:590px;
}

.RadPanelBar_CustomBasic .rpExpanded .rpText
{
    background: url('');
    background-color: #FFFACD;
    color: #000000;
    width:590px;
    cursor:default;
}

.RadPanelBar_CustomBasic .rpGroup .rpExpanded .rpText,
.RadPanelBar_CustomBasic .rpGroup .rpExpandable .rpText
{
    background-position: right 5px;
}

.RadPanelBar_CustomBasic .rpGroup
{
    overflow-x: hidden;
    overflow-y: auto;
}

.RadPanelBar_CustomBasic .rpGroup .rpLink,
.RadPanelBar_CustomBasic .rpGroup .rpLast .rpLink
{
    border-bottom-color: #626262;
}

.RadPanelBar_CustomBasic .rpLevel1 .rpLink .rpFirst
{
    border-top: 1px solid #bfbfbf;
}

.RadPanelBar_CustomBasic .rpLevel1 .rpLink .rpItem .rpFirst
{
    border-top: 1px solid #626262;
}

.RadPanelBar .rpLast .rpLevel1
{
    border-bottom: 0;
}

.RadPanelBar_CustomBasic .rpLevel1 .rpLast .rpLink
{
    border-bottom-width: 0;
}

.RadPanelBar_CustomBasic .rpLevel1 .rpGroup .rpLast .rpLink,
.RadPanelBar_CustomBasic .rpLevel1 .rpLast .rpGroup .rpLink
{
    border-bottom-width: 1px;
}

.RadPanelBar_CustomBasic .rpRootGroup .rpLink,
.RadPanelBar_CustomBasic .rpRootGroup .rpTemplate
{
    font: bold 10px Verdana;
    color: #000000;
}

.RadPanelBar_CustomBasic .rpTemplate
{
    width:598px;
    border: 1px #000000;
    border-style: none dashed dashed dashed;
}

.RadPanelBar_CustomBasic .rpRootGroup .rpText
{
    padding: 6px 7px 6px 3px;
}

.RadPanelBar_CustomBasic .rpGroup .rpLink,
.RadPanelBar_CustomBasic .rpGroup .rpTemplate
{
    font-size: 11px;
}

.RadPanelBar_CustomBasic .rpGroup .rpText
{
    padding: 1px 7px 0 0;
}

.RadPanelBar_CustomBasic .rpLevel1 .rpText
{
    padding-left: 10px;
}

.RadPanelBar_CustomBasic .rpLevel2 .rpText
{
    padding-left: 20px;
}

.RadPanelBar_CustomBasic .rpLevel3 .rpText
{
    padding-left: 30px;
}

.RadPanelBar_CustomBasic .rpDisabled .rpText
{
    cursor: default;
    color: #bbb;
}

.RadPanelBar_CustomBasic .rpRootGroup .rpDisabled:hover
{
    cursor: default;
    text-decoration: none;
}

.RadPanelBar_CustomBasic .rpGroup .rpDisabled:hover
{
    cursor: default;
    text-decoration: none;
}

[Luke Kasper]

Another thing to note:
The above .css file seems to render perfectly in Firefox.  Unfortunately, our site is not used in Firefox and I need it to render correctly in IE7.

[Luke Kasper]

Through much trial and error, I figured it out.  I was missing a css declaration.  Here's the code that I added to the above file to fix it:

.RadPanelBar_CustomBasic .rpExpandable .rpOut .rpExpandHandle
{
    height:0px;
    margin: 0 0 0 0;
}

Essentially, the area that was showing up that I didn't want to show up was the .rpExpandHandle stuff.  I just made the height 0 and did the same w/the margins.

That's the fix that worked for me!

[Cori]

Hello Luke,

If you don't want the .rpExpandHandle to show, you just need to set display: none. No need to shrink the height or remove the margins.