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

RadSplitter Remove Borders not working

8 Answers 234 Views

Splitter

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

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

Accepted

answered on 04 Mar 2015, 03:33 PM

capture.jpg

I tried this approach, but was able eliminate only top and left borders. Please suggest

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.

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>

answered on 10 Mar 2015, 12:08 PM

Hello,

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

<html xmlns="http://www.w3.org/1999/xhtml">

<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.