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

Removing Border White Line

5 Answers 124 Views
PanelBar
This is a migrated thread and some comments may be shown as answers.
L
Top achievements
Rank 1
L asked on 09 Apr 2016, 02:55 PM

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>

5 Answers, 1 is accepted

Sort by
0
Accepted
Ivan Danchev
Telerik team
answered on 12 Apr 2016, 07:03 AM
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
Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
0
L
Top achievements
Rank 1
answered on 12 Apr 2016, 07:18 AM

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.

 

0
Ivan Danchev
Telerik team
answered on 14 Apr 2016, 03:00 PM
Hello,

Thank you for providing the missing information.

Try applying the following CSS rule:
.RadPanelBar .rpItem {
    background-color: #2C3E50;
}


Regards,
Ivan Danchev
Telerik
Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
0
L
Top achievements
Rank 1
answered on 18 Apr 2016, 03:43 AM

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.

0
Ivan Danchev
Telerik team
answered on 20 Apr 2016, 12:15 PM
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
Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
Tags
PanelBar
Asked by
L
Top achievements
Rank 1
Answers by
Ivan Danchev
Telerik team
L
Top achievements
Rank 1
Share this question
or