Remove all borders from RadPanelBar

11 posts, 0 answers
  1. Doug
    Doug avatar
    23 posts
    Member since:
    Mar 2007

    Posted 11 Jun 2009 Link to this post

    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>



  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 12 Jun 2009 Link to this post

    Hi Doug,

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

    CSS:
     
    <style type="text/css">  
    .RadPanelBar .rpRootGroup,    
    .RadPanelBar .rpRootGroup .rpLink  
    {    
         bordernone !important;    
         color#5F5F5F;  
         text-decorationnone;  
         border-bottom-width0px !important;  
    }  
    .RadPanelBar .rpOut  
    {  
        border-bottom-width0px !important;  
    }  
    </style> 

    Thanks,
    Princy.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Doug
    Doug avatar
    23 posts
    Member since:
    Mar 2007

    Posted 12 Jun 2009 Link to this post

    That worked!

    Thanks,
    Doug
  5. Dhanalakshmi a
    Dhanalakshmi a avatar
    1 posts
    Member since:
    Jul 2009

    Posted 16 Jul 2009 Link to this post

    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,
  6. Joe
    Joe avatar
    28 posts
    Member since:
    May 2007

    Posted 19 Jul 2009 Link to this post

    thanks, it solved an issue!!
  7. David Blok
    David Blok avatar
    42 posts
    Member since:
    Nov 2009

    Posted 16 Dec 2009 Link to this post

    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.
  8. Devi Ganesan
    Devi Ganesan avatar
    1 posts
    Member since:
    Mar 2010

    Posted 11 Mar 2010 Link to this post

    hi,

    thanks this solved my problem..
  9. Chris Cooper
    Chris Cooper avatar
    2 posts
    Member since:
    Jul 2009

    Posted 26 Nov 2010 Link to this post

    Thanks Princy, Your solution worked for me too.
  10. Arno
    Arno avatar
    19 posts
    Member since:
    Sep 2010

    Posted 27 Dec 2010 Link to this post

    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...
  11. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 29 Dec 2010 Link to this post

    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
    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
  12. Arno
    Arno avatar
    19 posts
    Member since:
    Sep 2010

    Posted 02 Jan 2011 Link to this post

    Thanks Kamen, that works fine!
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017