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

RadSplitter border

10 Answers 192 Views
Splitter
This is a migrated thread and some comments may be shown as answers.
sarika
Top achievements
Rank 1
sarika asked on 18 Feb 2009, 11:18 PM
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

10 Answers, 1 is accepted

Sort by
0
Accepted
Svetlina Anati
Telerik team
answered on 19 Feb 2009, 03:08 PM
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.
0
sarika
Top achievements
Rank 1
answered on 19 Feb 2009, 03:49 PM
that worked !! thanks for a quick reply.

Sarika

0
SoniTek
Top achievements
Rank 1
answered on 21 Apr 2010, 03:22 AM
This work for me in IE but not Firefox.
0
Dobromir
Telerik team
answered on 21 Apr 2010, 04:58 PM
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.
0
SoniTek
Top achievements
Rank 1
answered on 22 Apr 2010, 04:03 AM

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;    
    displayblock;   
}  
 
.RadSplitter_Default .pane,      
.RadSplitter_Default .paneHorizontal     
{     
    border0px ... ;     
}    
 
.RadSplitter_Default     
{        
    border0px ... ;        
}     
 

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> 
 
 

0
Dobromir
Telerik team
answered on 23 Apr 2010, 03:55 PM
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.
0
SoniTek
Top achievements
Rank 1
answered on 23 Apr 2010, 11:27 PM
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.
0
Dobromir
Telerik team
answered on 26 Apr 2010, 10:36 AM
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.
0
SoniTek
Top achievements
Rank 1
answered on 26 Apr 2010, 08:07 PM
Hello Dobromir,

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

Thanks,
Dzung
0
Dobromir
Telerik team
answered on 28 Apr 2010, 09:55 AM
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.
Tags
Splitter
Asked by
sarika
Top achievements
Rank 1
Answers by
Svetlina Anati
Telerik team
sarika
Top achievements
Rank 1
SoniTek
Top achievements
Rank 1
Dobromir
Telerik team
Share this question
or