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
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:
Hope this helps.
Regards,
Shinu.
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
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.
Regards,
Vessy
Telerik
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>
<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
Hello,
As I am not sure about your configuration, I used the following:
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
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.
0
David
Top achievements
Rank 1
Iron
Iron
Veteran
answered on 10 Mar 2015, 12:25 PM
Bozhidar, that worked beautifully! Thank you