RadSplitter border

[sarika]

Hi,
I am trying to use a Telerik Splitter control without a border around it. I tried to set the splitter border properties, use styles with no border but it did not help. If I view source from browser I see :
 class="pane firstItem" style="border-width:1px

Is there a way to get rid of this border-width:1px ?

The code that I am using is as below:
<telerik:RadSplitter id="radSplitterCommsPortal" runat="server" height="500" liveResize="true" width="100%" Skin="WebBlue" >
        <telerik:RadPane id="rdPnlPrint" runat="server" width="33%"></telerik:RadPane>
</telerik:RadSplitter>

Thank you,
Sarika

[Svetlina Anati]

Hi sarika,

When using RadSplitter for ASP.NET AJAX  the borders can be removed very easy - the RadSplitter's BorderSize and PanesBorderSize properties are designed to control the borders' appearance. To remove all the RadSplitter's borders you should set BorderSize="0". In the same manner, to remove the RadPanes' borders you should set PanesBorderSize="0" as explained in the KB article below:

http://www.telerik.com/support/kb/aspnet-ajax/splitter/removing-the-border-of-radsplitter-panes-and-the-radsplitter.aspx

Sincerely yours,
Svetlina
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[sarika]

that worked !! thanks for a quick reply.

Sarika

[SoniTek]

This work for me in IE but not Firefox.

[Dobromir]

Hi Dzung,

I tested the solution provided by Svetlina and it was working on my side for both IE and FireFox. Could you please provide more detailed information regarding your specific scenario, so we can investigate it further? It would be helpful if you could answer (provide) some of the following items:

1. Which version of RadControls for ASP.NET AJAX you are using?
2. Which version of .NET Framework are you using?
3. Under which browser (and its version) the problem occurs?
4. Could you please provide a sample project reproducing the problem?
5. Could you please provide the exact steps to follow, in order to reproduce the problem?

In addition, the following code demonstrates a simple declaration of RadSplitter with applied BorderSize PanesBorderSize and properties:

<telerik:RadSplitter Width="100%" Height="750px" ID="RadSplitter1" runat="server" Orientation="Horizontal" BorderSize="0" PanesBorderSize="0">
    <telerik:RadPane ID="RadPane1" runat="server" Height="150px" BackColor="Black"></telerik:RadPane>
    <telerik:RadPane ID="RadPane2" runat="server" BackColor="Green"></telerik:RadPane>
</telerik:RadSplitter>

All the best,
Dobromir
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[SoniTek]

Hi Dobromir,

I guess the difference was my RadSplitter height="100%". But I want it to be 100% height.

 

1. Which version of RadControls for ASP.NET AJAX you are using?

      Version 2009.1.527.35

1. Which version of .NET Framework are you using?

      .NET Framework 3.5

1. Under which browser (and its version) the problem occurs?

      Firefox 3.0.19

Style.css

div.container
{
    width:100%;
    margin:0px;
    border:0px solid gray;
    /*line-height:150%;*/
}

div.header, div.footer
{
    padding:0.5em;
    color:black;
    background-color:white;
    clear:left;
}

h1.header
{
    padding:0;
    margin:0;
}

div.left
{
    float:left;
    /*width:160px;*/
    margin:0;
    padding:1em;
}

div.content
{
    margin-left:190px;
    border-left:1px solid gray;
    padding:1em;
}

div.rightAlignedWrapper
{
    float:rightright;
    display: block;
}

.RadSplitter_Default .pane,
.RadSplitter_Default .paneHorizontal
{
    border: 0px ... ;
}

.RadSplitter_Default
{
    border: 0px ... ;
}

MasterPage.master <%@ Master Language="VB" CodeFile="MasterPage.master.vb" Inherits="MasterPage" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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

<head id="Head1" runat="server">

<title></title>

<link href="Style.css" rel="stylesheet" type="text/css" />

</head>

<script language="javascript" type="text/javascript">

function SaveSelectedNodes(node) {

var treeView = $find("<%= RadTreeView1.ClientID %>");

var nodes = treeView.get_allNodes();

var i;

var selectedNodes = "";

for (i = 0; i < nodes.length; i++) {

if (nodes[i].get_expanded())

selectedNodes += nodes[i].get_value() + "*";

}

Set_Cookie("test", selectedNodes);

}

//session cookie

function Set_Cookie(name, value) {

document.cookie = name + "=" + escape(value);

}

</script>

<body>

<form id="form1" runat="server">

<telerik:RadScriptManager Runat="server">

</telerik:RadScriptManager>

<div class="container">

<div class="header"><h1 class="header">Fifth Avenue Collection</h1></div>

<div>

<telerik:RadToolBar ID="RadToolBar1" runat="server" Width="100%" EnableViewState="false">

<Items>

<telerik:RadToolBarButton Text="Button1"></telerik:RadToolBarButton>

<telerik:RadToolBarButton IsSeparator="true" />

<telerik:RadToolBarButton Text="Button2"></telerik:RadToolBarButton>

<telerik:RadToolBarButton>

<ItemTemplate>

<div class="rightAlign">

<telerik:RadTextBox ID="RadTextBox1" runat="server" EmptyMessage="Search">

</telerik:RadTextBox></div>

</ItemTemplate>

</telerik:RadToolBarButton>

</Items>

</telerik:RadToolBar>

</div>

<telerik:RadSplitter ID="RadSplitter1" runat="server" Orientation="Vertical" Height="400px" Width="100%" BorderSize="0" PanesBorderSize="0" Skin="Default">

<telerik:RadPane runat="server" id="LeftPane" Width="200px">

<%--Left pane--%>

<telerik:RadTreeView ID="RadTreeView1" runat="server" OnClientNodeExpanded="SaveSelectedNodes" OnClientNodeCollapsed="SaveSelectedNodes">

</telerik:RadTreeView>

</telerik:RadPane>

<telerik:RadSplitBar runat="server" ID="RadSplitBar1" CollapseMode="Forward"/>

<telerik:RadPane runat="server" id="RightPane">

<%--Right pane--%>

<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">

</asp:ContentPlaceHolder>

</telerik:RadPane>

</telerik:RadSplitter>

<div class="footer">Copyright 1999-2010</div>

</div>

</form>

</body>

</html>

MasterPage.master.vb

Imports Telerik.Web.UI
Partial Class MasterPage
    Inherits System.Web.UI.MasterPage

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        If Not Page.IsPostBack Then
            RadTreeView1.LoadContentFile("TreeView.xml")
            Dim cookie As HttpCookie = Request.Cookies("test")
            If cookie IsNot Nothing Then
                Dim toggleParts As String() = cookie.Value.Split("*")
                For Each part As String In toggleParts
                    If [String].IsNullOrEmpty(part) Then
                        Continue For
                    End If
                    Dim toggledNode As RadTreeNode = Me.RadTreeView1.FindNodeByValue(part)
                    'toggledNode.ExpandParentNodes()
                    toggledNode.Expanded = True
                Next
            End If

        End If
    End Sub
End Class

Default.aspx

<%@ Page Title="" Language="VB" MasterPageFile="~/MasterPage.master" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

        <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

        <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>

        <p>Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

        <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.</p>

        <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</p>

        <p>Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus</p>

</asp:Content>

[Dobromir]

Hi Dzung,

The provided code looks OK except the following part from the CSS:

.RadSplitter_Default .pane,
.RadSplitter_Default .paneHorizontal
{
    border: 0px ... ;
}

.RadSplitter_Default
{
    border: 0px ... ;
}

This is invalid css declaration and it may cause the problem - it is just a sample code. More information regarding the css border property is available here. In addition this is a solution provided for RadSplitter Classic and you can remove it.

I tried to reproduce the problem with the provided code but still to no avail, could you please try disable your browser add-ons and if possible upgrade the browser and see if the problem still exists.

For your convenience I have attached my test project. Also this movie demonstrates my test. Could you please check it to see if I am doing something wrong?

Kind regards,
Dobromir
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[SoniTek]

Hello Dobromir ,

Your sample does get rid of the border, however, the RadSplitter control needed to be a fix height inorder for Firefox to display correctly. If you set the height to 100% Firefox does not work.

[Dobromir]

Hi Dzung,

In the test project, that I have attached in my previous post, I used the provided code and the height property of RadSplitter is set explicitly to 400px. However, in order to make RadSplitter to occupy entire space between the header and the footer you need to do the following steps:

1. Pre-set height value for the header and footer DIVs
2. Set RadSplitter's Height property to 100%
3. Set RadSplitter's HeightOffset property to value equal to the combined header's and footer's height values
4. Set height value explicitly html, body, form to 100%
5. Set height value to all RadSplitter's parent DOM elements.

For your convenience I have attached the sample project with the modifications explained above again.

All the best,
Dobromir
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[SoniTek]

Hello Dobromir,

The modified zip file looks the same as the old one. Please check again.

Thanks,
Dzung

[Dobromir]

Hi Dzung,

Please accept my sincere apologies for the wrong attachment. The file attached to this post should be the correct one.

Greetings,
Dobromir
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.