
Luke Kasper
Top achievements
Rank 1
Luke Kasper
asked on 19 Oct 2010, 07:46 PM
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.
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.
6 Answers, 1 is accepted
0
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
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
Do you want to have your say when we set our development plans?
Do you want to know when a feature you care about is added or when a bug fixed?
Explore the
Telerik Public Issue Tracking
system and vote to affect the priority of the items
0

Luke Kasper
Top achievements
Rank 1
answered on 26 Oct 2010, 02:30 PM
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.
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.
0

Luke Kasper
Top achievements
Rank 1
answered on 26 Oct 2010, 03:03 PM
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 .rpLevel
1
.rpLink .rpFirst
{
border-top
:
1px
solid
#bfbfbf
;
}
.RadPanelBar_CustomBasic .rpLevel
1
.rpLink .rpItem .rpFirst
{
border-top
:
1px
solid
#626262
;
}
.RadPanelBar .rpLast .rpLevel
1
{
border-bottom
:
0
;
}
.RadPanelBar_CustomBasic .rpLevel
1
.rpLast .rpLink
{
border-bottom-width
:
0
;
}
.RadPanelBar_CustomBasic .rpLevel
1
.rpGroup .rpLast .rpLink,
.RadPanelBar_CustomBasic .rpLevel
1
.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 .rpLevel
1
.rpText
{
padding-left
:
10px
;
}
.RadPanelBar_CustomBasic .rpLevel
2
.rpText
{
padding-left
:
20px
;
}
.RadPanelBar_CustomBasic .rpLevel
3
.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
;
}
0

Luke Kasper
Top achievements
Rank 1
answered on 26 Oct 2010, 06:26 PM
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.
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.
0

Luke Kasper
Top achievements
Rank 1
answered on 28 Oct 2010, 11:14 PM
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:
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!
.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!
0

Cori
Top achievements
Rank 2
answered on 29 Oct 2010, 01:14 PM
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.
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.