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

Help with PanelBar styling

6 Answers 100 Views
PanelBar
This is a migrated thread and some comments may be shown as answers.
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.

6 Answers, 1 is accepted

Sort by
0
Nikolay Tsenkov
Telerik team
answered on 25 Oct 2010, 06:44 AM
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
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.
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 .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;
}
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.
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:

.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.
Tags
PanelBar
Asked by
Luke Kasper
Top achievements
Rank 1
Answers by
Nikolay Tsenkov
Telerik team
Luke Kasper
Top achievements
Rank 1
Cori
Top achievements
Rank 2
Share this question
or