Remove all borders from RadPanelBar

[Doug]

I have a RadPanelBar with No skin and would like to remove all borders and underlines.  I can not seem to get rid of the border on the Non expanded panel bar.  I am using RadControls for ASPNET AJAX Q1 2009.  Css and Asp below.

Any help would be appreciated.

Thanks
Doug

    .RadPanelBar .rpRootGroup,  
    .RadPanelBar .rpRootGroup .rpLink
    {  
         border: none !important;  
         color: #5F5F5F;
         text-decoration: none;
    }
    .RadPanelBar .rpRootGroup .rpGroup .rpLink:hover  
    {  
         border: none !important;  
         text-decoration: underline;
    }  
     .RadPanelBar .rpRootGroup .rpExpandable:link
     {
         text-decoration: none;
         border: none !important;  
     }

    .panelbarItem
    {
      color: #5F5F5F;
      font-size: 10pt;
         cursor: pointer;
         text-decoration: none;
         padding-left: 60px;
         height: 26px;
         border: none !important;  
    }
 
<telerik:RadPanelBar ID="RadPanelBar2" runat="server" EnableEmbeddedSkins="false"
         Width="450"  
         Skin=""
         OnItemDataBound="RadPanelbar1_ItemDataBound"
         OnItemClick="RadPanelbar1_ItemClick" ExpandMode="MultipleExpandedItems">
    <ExpandAnimation Type="OutQuint" Duration="900" />
</telerik:RadPanelBar>

[Princy]

Hi Doug,

I tried following CSS for removing borders and underlines from RadPanelBar.

CSS:

<style type="text/css">
.RadPanelBar .rpRootGroup,
.RadPanelBar .rpRootGroup .rpLink
{
     border: none !important;
     color: #5F5F5F;
     text-decoration: none;
     border-bottom-width: 0px !important;
}
.RadPanelBar .rpOut
{
    border-bottom-width: 0px !important;
}
</style>

Thanks,
Princy.

[Doug]

That worked!

Thanks,
Doug

[Dhanalakshmi a]

Hey,  thanx ,it was such a great help,
i had tried, changing the styles in the customized skin and even in the telerik base class,
but cudn get rid of the borders,
i had spent nearly 5 hrs, for this alone,
 thnks,

[Joe]

thanks, it solved an issue!!

[David Blok]

Hi, I tried the css code aswell and it worked fine, only 1 thing is weird in it.

If i hover over a panel item, the text moves 1px down for some reason, can't figure out where its comming from since the ccs only contains the code from above.

[Devi Ganesan]

hi,

thanks this solved my problem..

[Chris Cooper]

Thanks Princy, Your solution worked for me too.

[Arno]

Hello,

Princy's code worked for me as well, but I also ran into the problem David mentioned: the content below the panel item moves one pixel down when I hover over it. I was able to remove that behaviour using this CSS instead of Princy's version. It changes the border colors to my background color (white):

.RadPanelBar .rpRootGroup,
.RadPanelBar .rpRootGroup .rpLink
{
     border-color: #FFF
}

.RadPanelBar .rpOut
{
    border-color: #FFF
}

Perhaps Telerik can provide an easier way to remove all borders from RadPanelBar in a future version.

Another issue: I am using both a text and a (expand) image in the upper panel, and I noticed that the text was positioned a bit too low. I fixed that with this CSS:

.RadPanelBar .rpText
{
    position:relative;
    top:2px
}

Just in case someone can use it...

[Kamen Bundev]

Hi,

The "jumping" is caused by the 1px bottom padding .rpOut is adding on hover to compensate for the missing border. Princy's CSS, changed like this should take care of it:
.RadPanelBar .rpRootGroup
{
     border: none !important;
     color: #5F5F5F;
     text-decoration: none;
}
.RadPanelBar .rpRootGroup .rpLink,
.RadPanelBar .rpRootGroup .rpOut
{
    border: 0 !important;
    padding: 0 !important;
}

Regards,
Kamen Bundev
the Telerik team

[Arno]

Thanks Kamen, that works fine!