RadSplitter border

11 posts, 1 answers
  1. sarika
    sarika avatar
    6 posts
    Member since:
    Feb 2009

    Posted 18 Feb 2009 Link to this post

    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
  2. Answer
    Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 19 Feb 2009 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. sarika
    sarika avatar
    6 posts
    Member since:
    Feb 2009

    Posted 19 Feb 2009 Link to this post

    that worked !! thanks for a quick reply.

    Sarika

  5. SoniTek
    SoniTek avatar
    43 posts
    Member since:
    Apr 2005

    Posted 20 Apr 2010 Link to this post

    This work for me in IE but not Firefox.
  6. Dobromir
    Admin
    Dobromir avatar
    1633 posts

    Posted 21 Apr 2010 Link to this post

    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.
  7. SoniTek
    SoniTek avatar
    43 posts
    Member since:
    Apr 2005

    Posted 21 Apr 2010 Link to this post

    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> 
     
     

  8. Dobromir
    Admin
    Dobromir avatar
    1633 posts

    Posted 23 Apr 2010 Link to this post

    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.
  9. SoniTek
    SoniTek avatar
    43 posts
    Member since:
    Apr 2005

    Posted 23 Apr 2010 Link to this post

    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.
  10. Dobromir
    Admin
    Dobromir avatar
    1633 posts

    Posted 26 Apr 2010 Link to this post

    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.
  11. SoniTek
    SoniTek avatar
    43 posts
    Member since:
    Apr 2005

    Posted 26 Apr 2010 Link to this post

    Hello Dobromir,

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

    Thanks,
    Dzung
  12. Dobromir
    Admin
    Dobromir avatar
    1633 posts

    Posted 28 Apr 2010 Link to this post

    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017