Removing Border White Line

6 posts, 1 answers
  1. L
    L avatar
    295 posts
    Member since:
    Apr 2008

    Posted 09 Apr Link to this post

    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>

  2. Answer
    Ivan Danchev
    Admin
    Ivan Danchev avatar
    834 posts

    Posted 12 Apr Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. L
    L avatar
    295 posts
    Member since:
    Apr 2008

    Posted 12 Apr Link to this post

    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.

     

  5. Ivan Danchev
    Admin
    Ivan Danchev avatar
    834 posts

    Posted 14 Apr Link to this post

    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.
  6. L
    L avatar
    295 posts
    Member since:
    Apr 2008

    Posted 17 Apr in reply to Ivan Danchev Link to this post

    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.

  7. Ivan Danchev
    Admin
    Ivan Danchev avatar
    834 posts

    Posted 20 Apr Link to this post

    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017