RadSplitter Remove Borders not working

9 posts, 1 answers
  1. Minas
    Minas avatar
    5 posts
    Member since:
    Sep 2012

    Posted 01 Sep 2012 Link to this post

    I am working on an Asp .net project and i Am using RadSplitter to split me website. I want to remove the borders from the splitter. Here is my asp code below, i remove the borders but they are still appear.. Can anyone help me pleasE? 

        <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="webbetv1.WebForm1" %>
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
        <html runat="server">
        <head >
        <style type="text/css">
     
        .RadSplitter .pane, 
    .RadSplitter .paneHorizontal
    {
        border: 0px  !important;
        padding: 0px !important;
    }
            .style1
            {
                width: 100%;
                margin-bottom: 33px;
            }
        </style>
        <script type="text/javascript">
            //Put your JavaScript code here.
        </script>
        </head>
         <form id="Form1" runat="server">
        <body>
     
        <telerik:RadScriptManager ID="RadScriptManager1" Runat="server">
    </telerik:RadScriptManager>
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        </telerik:RadAjaxManager>
        <div  style="height:800px; width: auto;">
            <telerik:RadSplitter ID="MainSplitter" runat="server" Width="100%" Height="100%" ExpandMode="FullExpandItem"
                Orientation="Horizontal" LiveResize="false" BorderSize="0" BorderWidth="0px"  BorderStyle="None" CssClass="pane"   >
                <telerik:RadPane ID="TopPane" runat="server" Height="120" MinHeight="85" MaxHeight="150" BorderWidth="0px"  
                    Scrolling="none" CssClass="pane" >
                    <asp:PlaceHolder ID="PlaceHolder3" runat="server"></asp:PlaceHolder>
     
                    <table class="style1">
                        <tr>
                            <td>
                                 </td>
                            <td>
                                 </td>
                        </tr>
                        <tr>
                            <td>
                                sadasd</td>
                            <td>
                                 </td>
                        </tr>
                    </table>
     
                </telerik:RadPane>
                <telerik:RadSplitBar ID="RadsplitbarTop" runat="server" CollapseMode="Forward" Height="100%" BorderWidth="0px" BorderStyle="None" />
                </telerik:RadSplitter>
                </div>
                 </body>
                </form>
     
                </html>
  2. Answer
    Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 03 Sep 2012 Link to this post

    Hi Minas,

    Try overriding the default CSS as follows to achieve your scenario.

    CSS:
    <style type="text/css">
        .RadSplitter .rspResizeBarHorizontal
            {
                border-style: none !important;
            }
    </style>

    Hope this helps.

    Regards,
    Shinu.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Minas
    Minas avatar
    5 posts
    Member since:
    Sep 2012

    Posted 05 Sep 2012 Link to this post

     It works
  5. David
    David avatar
    159 posts
    Member since:
    Mar 2014

    Posted 04 Mar 2015 in reply to Shinu Link to this post

    I tried this approach, but was able eliminate only top and left borders. Please suggest
  6. Vessy
    Admin
    Vessy avatar
    1382 posts

    Posted 05 Mar 2015 Link to this post

    Hi David,

    Have you tried setting the Splitter's BorderSize property to 0? It has to remove all borders around a Splitter. Another possible cause of the problem can be if the target splitter is nested in another one, so you will need to remove its borders as well.
    <telerik:RadSplitter ID="RadSplitter1" runat="server" Orientation="Horizontal" BorderSize="0">
        <telerik:RadPane ID="RadPane1" runat="server">
        </telerik:RadPane>
        <telerik:RadSplitBar ID="Splitbar1" runat="server" CollapseMode="Both"></telerik:RadSplitBar>
        <telerik:RadPane ID="RadPane2" runat="server">
        </telerik:RadPane>
    </telerik:RadSplitter>

    Regards,
    Vessy
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  7. David
    David avatar
    159 posts
    Member since:
    Mar 2014

    Posted 06 Mar 2015 in reply to Vessy Link to this post

    I did. In addition i tried other suggestions, such as:

    <style type="text/css">

    .RadSplitter_Silk
    {
        outline:none !important;
        border-style: none !important;
    }
     
    .RadPane_Silk
    {
        border-style: none !important;
    }

    .RadSplitter_Silk .pane,  
    .RadSplitter_Silk .paneHorizontal
    {
        border-style: none !important;
        border-right-width:0px;border-bottom-width:0px;
    }

    .RadSplitter .rspResizeBarHorizontal
            {
                border-style: none !important;
            }

    </style>
  8. David
    David avatar
    159 posts
    Member since:
    Mar 2014

    Posted 09 Mar 2015 in reply to David Link to this post

    Any advice?
  9. Bozhidar
    Admin
    Bozhidar avatar
    677 posts

    Posted 10 Mar 2015 Link to this post

    Hello,

    As I am not sure about your configuration, I used the following:

    <head id="Head1" runat="server">
        <title></title>
        <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
        </telerik:RadCodeBlock>
        <style type="text/css">
            table.RadSplitter_Silk,
            table.RadSplitter_Silk .rspPaneTabContainer,
            table.RadSplitter_Silk .rspPane,
            table.RadSplitter_Silk td.rspResizeBar,
            table.RadSplitter_Silk .rspSlideContainerResize,
            table.RadSplitter_Silk .rspPaneHorizontal,
            table.RadSplitter_Silk .rspResizeBarHorizontal,
            table.RadSplitter_Silk .rspSlideContainerResizeHorizontal {
                border-color: transparent;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
            <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
            </telerik:RadScriptManager>
            <telerik:RadSplitter ID="RadSplitter1" runat="server" Width="100%" Height="100%"
                Skin="Silk" FullScreenMode="True" SplitBarsSize="">
                <telerik:RadPane ID="RadPane1" runat="server" Width="200px" Scrolling="None">
                    <div style="width: 210px; height: 400px; background-color: Red;">
                    </div>
                </telerik:RadPane>
                <telerik:RadSplitBar ID="RadSplitBar1" runat="server" CollapseMode="Both">
                </telerik:RadSplitBar>
                <telerik:RadPane ID="RadPane2" runat="server" Scrolling="None">
                    <div style="width: 100%; height: 400px; padding: 20px; background: blue;">
                    </div>
                </telerik:RadPane>
            </telerik:RadSplitter>
        </form>
    </body>
    </html>

    As you could see, the border is set to transparent, it will ensure that for any resizing callculations it will be physically there and the calculations will be properly calculated, but it is invissible as there isn't any border.

    You could add more selectors to the CSS rule, if necessary for other borders that I missed.

    You could also send me your splitter so I would be able to make its borders transparent if you experience some troubled to do that or if the provided sample code does not work on your side.

    Regards,
    Bozhidar
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  10. David
    David avatar
    159 posts
    Member since:
    Mar 2014

    Posted 10 Mar 2015 in reply to Bozhidar Link to this post

    Bozhidar, that worked beautifully! Thank you

      
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017