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

RadSplitter Remove Borders not working

8 Answers 160 Views
Splitter
This is a migrated thread and some comments may be shown as answers.
Minas
Top achievements
Rank 1
Minas asked on 01 Sep 2012, 05:58 PM
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>

8 Answers, 1 is accepted

Sort by
0
Accepted
Shinu
Top achievements
Rank 2
answered on 03 Sep 2012, 06:30 AM
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.
0
Minas
Top achievements
Rank 1
answered on 05 Sep 2012, 07:52 PM
 It works
0
David
Top achievements
Rank 1
Iron
Iron
Veteran
answered on 04 Mar 2015, 03:33 PM
I tried this approach, but was able eliminate only top and left borders. Please suggest
0
Vessy
Telerik team
answered on 05 Mar 2015, 10:49 AM
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.

 
0
David
Top achievements
Rank 1
Iron
Iron
Veteran
answered on 06 Mar 2015, 06:36 PM
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>
0
David
Top achievements
Rank 1
Iron
Iron
Veteran
answered on 09 Mar 2015, 07:18 PM
Any advice?
0
Bozhidar
Telerik team
answered on 10 Mar 2015, 12:08 PM
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.

 
0
David
Top achievements
Rank 1
Iron
Iron
Veteran
answered on 10 Mar 2015, 12:25 PM
Bozhidar, that worked beautifully! Thank you

  
Tags
Splitter
Asked by
Minas
Top achievements
Rank 1
Answers by
Shinu
Top achievements
Rank 2
Minas
Top achievements
Rank 1
David
Top achievements
Rank 1
Iron
Iron
Veteran
Vessy
Telerik team
Bozhidar
Telerik team
Share this question
or