Removing Border White Line

[L]

hi 

How do i remove those white border line in the header? Thanks a lot

Here are my code.

  <style>
div.RadPanelBar_Default div.rpHeaderTemplate,
div.RadPanelBar_Default a.rpLink,
div.RadPanelBar_Default a.rpSelected
{
    background-image: none;
    background-color: #2C3E50;
    color:#fff;
    border-color:#2C3E50;
    border: none 0px !important; 
    font-size:medium;

}

 div.RadPanelBar_Default .rpExpanded {
    background-color: #2C3E50 !important;
    color:#fff;
    border-color:#2C3E50;
    border: none 0px !important; 
}  

 .RadPanelBar .rpRootGroup, .rpItem .rpLink   
{    
     border: none 0px !important;    
     color: #FFF;  
     text-decoration: none;  
     border-bottom-width: 0px !important; 
     padding: 0px 0px 0px 0px !important; 
}  

.RadPanelBar rpRootGroup  .rpGroup .rpItem .rpLink
   {
      color: Green;
   }
.RadPanelBar .rpOut  
{  
    border-bottom-width: 0px !important;  
}  
.RadPanelBar_Default ul li a:link, 
.RadPanelBar_Default ul li a:visited, 
.RadPanelBar_Default ul li a:hover, 
.RadPanelBar_Default ul li a:active 
{
    color: #fff;
    display: block;
    /* width: auto !important;
    float: left; */
    border-top: 0px solid #2C3E50;
    border-bottom: 0px solid #2C3E50;
    border: none 0px !important; 
 

}
.rpExpanded {
    background-color:#2C3E50  !important;
    color:#fff;
    border: none 0px !important; 
}
 
.rpSelected {
    background-color:#2C3E50  !important;
    color:#fff;
    border: none 0px !important; 
}

 
</style>
    <telerik:RadPanelBar ID="RadPanelBar1"  runat="server">
          
    </telerik:RadPanelBar>

[Ivan Danchev]

Hello,

You must have additional CSS applied to your PanelBar because at my end, when using the styles you posted, no white borders appear and the control looks as shown in this screenshot.
I would suggest isolating the PanelBar to a sample page along with all the CSS you are using and you can post it for further review.

Regards,
Ivan Danchev
Telerik

[L]

hi

Forgot to add on the xml file for the panelbar

Here is the panelbar items in xml format and the code behind that load the xml file

protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
        {
            RadPanelBar1.LoadContentFile(@"~\folder\XMLFile.xml");
        }
    }

<?xml version="1.0" encoding="utf-8" ?>

<PanelBar>
  <Item Text="Header 1"  BorderStyle="None" Expanded="True" ForeColor="White"  BorderColor="#2C3E50">
    <Item Text="Item 1"  ForeColor="White" BackColor="#2C3E50" />
  </Item>
  <Item Text="Header 2"  BorderStyle="None"  Expanded="True">
    <Item Text="Item 1"  ForeColor="White" BackColor="#2C3E50" />
    <Item Text="Item 1" ForeColor="White" BackColor="#2C3E50"/>
  </Item>
  <Item Text="Header 3"  BorderStyle="None"  Expanded="True">
    <Item Text="Item" ForeColor="White" BackColor="#2C3E50" />
    <Item Text="Item" ForeColor="White" BackColor="#2C3E50"/>
    <Item Text="Item" ForeColor="White" BackColor="#2C3E50"/>
    <Item Text="Item" ForeColor="White" BackColor="#2C3E50"/>
  </Item>
  <Item Text="Header 4"  BorderStyle="None"  Expanded="True">
    <Item Text="Item" ForeColor="White" BackColor="#2C3E50" />
    <Item Text="Item" ForeColor="White" BackColor="#2C3E50"/>
    <Item Text="Item" ForeColor="White" BackColor="#2C3E50"/>
    <Item Text="Item" ForeColor="White" BackColor="#2C3E50"/>
  </Item>
  <Item Text="Header 5" BorderStyle="None"  Expanded="True">
    <Item Text="Item" ForeColor="White" BackColor="#2C3E50" />
    <Item Text="Item" ForeColor="White" BackColor="#2C3E50"/>
    <Item Text="Item" ForeColor="White" BackColor="#2C3E50"/>
  </Item>
</PanelBar>

How do i remove the white border line? Thanks and sorry for the inconveniences caused.

 

[Ivan Danchev]

Hello,

Thank you for providing the missing information.

Try applying the following CSS rule:

.RadPanelBar .rpItem {
    background-color: #2C3E50;
}

Regards,
Ivan Danchev
Telerik

[L]

hi

I am trying to make the header color to #F39C12 but it always turned out white. How should i go about it? Thanks a lot.

[Ivan Danchev]

Hello,

I guess by header color you mean the text color of the root items (Header 1, Header 2, etc.). If that is the case you can set the color with the following CSS rule:

.RadPanelBar .rpRootLink .rpText  {
    color: #F39C12;
}

Regards,
Ivan Danchev
Telerik