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

Scrolling problem with radSplitter

5 Answers 266 Views
Splitter
This is a migrated thread and some comments may be shown as answers.
Elad
Top achievements
Rank 1
Elad asked on 07 Jun 2009, 12:22 PM
Hello,
I am trying to design a page that has a Header pane , a side menu pane , and a contents pane, using radSplitter.
See the folowing image to illustrate the desired result: Desired result

My problem is that the width\height of the contents pane exceeds the page limits, and are causing scroll bars to appear. Here is how it looks like:  Result
(I have another minor question.. The oriantation peroperty behaves strange.. to get vertical oriantation I need to set it to Horizontal, and vice versa. See my code below)

I have simplified the code the the following:
<%@ Page language="C#"%>   
<%@ Register Assembly="Telerik.Web.UI, Version=2009.1.311.35, Culture=neutral, PublicKeyToken=121fae78165ba3d4" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">  
<head runat="server">  
<title>test</title>     
<style type="text/css">  
    html,body,form{  
    height:100%;  
    width:100%;  
}  
</style> 
</head> 
<body> 
    <form id="form1" runat="server">  
        <asp:ScriptManager ID="ScriptManager1" runat="server" /> 
        <telerik:radSplitter runat="server" ID="mainSplitter" FullScreenMode="true" Orientation="Horizontal" BorderSize="0">  
        <telerik:RadPane runat="server" ID="header" Height="120px">  
            header  
        </telerik:RadPane> 
        <telerik:RadPane runat="server" ID="content">  
            <telerik:RadSplitter Orientation="Vertical" runat="server" ID="InternalSplitter">  
                <telerik:RadPane ID="ContentPane" runat="server">  
                    content  
                </telerik:RadPane> 
                <telerik:RadPane ID="SidePane" runat="server">  
                    side  
                </telerik:RadPane> 
            </telerik:RadSplitter> 
        </telerik:RadPane> 
        </telerik:RadSplitter> 
    </form> 
</body> 
</html> 
 
 

As you can see the scrollbars are there for no reason and they adjust themselves if I resize the browser window. They even appear in full screen mode.

What can I do about them?
Also, please address the orientation problem I have mentioned.

Thanks,
Elad.

5 Answers, 1 is accepted

Sort by
0
Svetlina Anati
Telerik team
answered on 08 Jun 2009, 02:15 PM
Hi Elad,

When you nest a RadSplitter in a RadPane, you should set Scrolling=None to the parent RadPane because otherwise you will get unneccessary scrollbars - if any scrollbars are needed, the nested splitter will generate them.

I also recommend to remove the FullScreenMode property because it is obsolete and instead of that to set Width and Height to 100% for the splitter and also modify your CSS in manner to remove width 100% and set margin and padding 0. This being said, you should modify your code in the following manner:

<html xmlns="http://www.w3.org/1999/xhtml">  
<head> 
    <title>test</title> 
    <style type="text/css">     
    html,body,form{     
    height:100%;     
     margin: 0;  
     padding:0'    
 }     
 </style> 
</head> 
<body> 
    <form id="form1" runat="server">  
        <asp:ScriptManager ID="ScriptManager1" runat="server" /> 
        <telerik:RadSplitter runat="server" ID="mainSplitter" Width="100%" Height="100%" 
            Orientation="Horizontal" BorderSize="0">  
            <telerik:RadPane runat="server" ID="header" Height="120px">  
                header  
            </telerik:RadPane> 
            <telerik:RadPane runat="server" ID="content" Scrolling="None">  
                <telerik:RadSplitter Orientation="Vertical" runat="server" ID="InternalSplitter">  
                    <telerik:RadPane ID="ContentPane" runat="server">  
                        content  
                    </telerik:RadPane> 
                    <telerik:RadPane ID="SidePane" runat="server">  
                        side  
                    </telerik:RadPane> 
                </telerik:RadSplitter> 
            </telerik:RadPane> 
        </telerik:RadSplitter> 
    </form> 
</body> 
</html> 
 

After I applied the above explained modifications, the result was the one you require.

Kind regards,
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
Elad
Top achievements
Rank 1
answered on 21 Jun 2009, 07:16 AM
Hi Svetlina, Thank you for your help.
I have tried what you suggested, and it indeed hide the scrollbars.
But still the contents of the pane exceeds it's size, only this time there are no scrollars.
Now I have some 2px of content to the left that is hidden, and I can't scroll there. I know this because if I select-drag my mouse to that hidden area, it causes the page to scroll there, and I can see the hidden content.

In other words, your solution made the scrollbars hidden, but didn't eliminate the need for scrollbars.

Can you please provide a solution?

Thanks,
Elad.
0
Svetlina Anati
Telerik team
answered on 23 Jun 2009, 02:17 PM
Hello Elad,

I tested your configuration on my side but unfortunately to no avail.Would you please provide some markup which will replicate the issue on my side? Once I receive the markup along with detailed reproduction instructions and explanations of the issue on my side I will do m y best to help. 

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
scvn80
Top achievements
Rank 1
answered on 29 Aug 2013, 04:22 AM
Hello Svetlina

I have the same issue, Vertical scroll bar always show in Master page. I tryed all your suggest in this thread but it still show Verical Scroll bar. I attach a screen shot .

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="RootPage.master.cs" Inherits="QLVB_WEB.RootPage" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<head id="Head1" runat="server">
    <title></title>
    <style type="text/css">
        html, body, form
        {
            height: 100%;
            margin: 0px;
            padding: 0px; /*background: #fff url('images/bg.png');*/
        }
    </style>
    <link href="css/Stylesheet1.css" rel="stylesheet" type="text/css" />
    <link href="css/ComboBox.MySkin_Simple.css" rel="stylesheet" type="text/css" />
     
    <script type="text/javascript">
        //Ham xu ly cac nut tren ToolBar
        function RadToolBarTop_Clicked(sender, args) {
            var chosenItem = args.get_item().get_text();
            switch (chosenItem) {
                case "Quản trị":
                    strTemp = "QUANTRI/VBCV_QT_PBND.aspx";
 
                    var newwindow;
                    var width = 800;
                    var height = 600;
                    var left = parseInt((screen.availWidth / 2) - (width / 2));
                    var top = parseInt((screen.availHeight / 2) - (height / 2));
                    var windowFeatures = "width=" + width + ",height=" + height +
                                ",status=no,resizable,left=" + left + ",top=" + top +
                                ",screenX=" + left + ",screenY=" + top;
                    window.moveTo(0, 0);
                    window.resizeTo(screen.width, screen.height);
                    newwindow = window.open(strTemp).focus(); //,"QT", windowFeatures);
                    break;
                case "Trợ giúp":
                    newwindow = window.open("Includes/Help/Help.htm");
                    break;
 
                case "Đổi mật khẩu":
                    newwindow = window.open("T_ChangePass.aspx");
                    break;
 
            }
        }
    </script>
 
     
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
     
            <telerik:RadSplitter ID="Radsplitter3" Skin="Simple" runat="server" Orientation="Horizontal" Height="100%" Width="98%" >
                <telerik:RadPane ID="Radpane5" runat="server" Height="30" Scrolling="None">
                    <table style="background-color: #94cce7; vertical-align: top; margin: 0; padding: 0;
                        margin-top: 0; border: 0" border="0" cellpadding="0" cellspacing="0" width="100%"  >
                        <tr>
                            <td>
                                <asp:Label ID="lblUsername" runat="server" ForeColor="White" ></asp:Label>
                            </td>
                            <td valign="middle" align="right" style="margin: 0; padding: 0; margin-top: 0px;
                                margin-bottom: 2; border-left: 0">
                                <telerik:RadToolBar ID="RadToolBarTop" CssClass="RadToolBar" Height="25px" runat="server"
                                    OnClientButtonClicked="RadToolBarTop_Clicked" OnButtonClick="RadToolBarTop_ButtonClick"
                                    Width="200px" Skin="Vista" Font-Size="12px">
                                    <CollapseAnimation Duration="200" Type="OutQuint" />
                                    <Items>
                                        <%--<telerik:RadToolBarButton Font-Names="Tahoma" ImageUrl="Includes/images/Img/newDistributionList.gif"
                                                Text="Quản trị" ToolTip="Quản trị người dùng" Value="300">
                                            </telerik:RadToolBarButton>
                                            <telerik:RadToolBarButton IsSeparator="true">
                                            </telerik:RadToolBarButton>--%>
                                        <telerik:RadToolBarButton Font-Names="Tahoma" ImageUrl="Includes/images/Img/help.gif"
                                            Text="Trợ giúp" ToolTip="Trợ giúp" Value="300">
                                        </telerik:RadToolBarButton>
                                        <telerik:RadToolBarButton IsSeparator="true">
                                        </telerik:RadToolBarButton>
                                        <%--  <telerik:RadToolBarButton Font-Names="Tahoma" ImageUrl="Includes/images/Img/Refresh.gif"
                                                Text="Đổi mật khẩu" ToolTip="Đổi mật khẩu" Value="300">
                                            </telerik:RadToolBarButton>
                                            <telerik:RadToolBarButton IsSeparator="true">
                                            </telerik:RadToolBarButton>--%>
                                        <telerik:RadToolBarButton Font-Names="Tahoma" ImageUrl="Includes/images/Img/logoff.gif"
                                            Text="Log Off" ToolTip="Thay đổi người dùng" Value="300">
                                        </telerik:RadToolBarButton>
                                    </Items>
                                </telerik:RadToolBar>
                            </td>
                        </tr>
                    </table>
                </telerik:RadPane>
                <telerik:RadPane ID="Radpane6" runat="server" Skin="Simple" Height="400" Scrolling="None">
                    <telerik:RadSplitter ID="Radsplitter4" runat="server" Skin="Simple">
                        <telerik:RadPane ID="Radpane7" runat="server" Width="200px" >
                            <telerik:RadTreeView ID="RadTreeView1" runat="server" Skin="Simple" OnNodeClick="RadTreeView1_NodeClick">
                            </telerik:RadTreeView>
                        </telerik:RadPane>
                        <telerik:RadSplitBar ID="RadSplitBar2" runat="server" CollapseMode="Forward">
                        </telerik:RadSplitBar>
                        <telerik:RadPane ID="Radpane8" runat="server" >
                            <asp:ContentPlaceHolder ID="cpContent" runat="server">
                            </asp:ContentPlaceHolder>
                        </telerik:RadPane>
                    </telerik:RadSplitter>
                </telerik:RadPane>
            </telerik:RadSplitter>
     
    </form>
</body>
</html>

What can I do ?

Thanks.
0
brian
Top achievements
Rank 1
answered on 29 Aug 2013, 05:58 AM
Same issue.   The problem is if you set overflow style using common css, this breaks pages that do not have the splitter but share same master page/css.
Tags
Splitter
Asked by
Elad
Top achievements
Rank 1
Answers by
Svetlina Anati
Telerik team
Elad
Top achievements
Rank 1
scvn80
Top achievements
Rank 1
brian
Top achievements
Rank 1
Share this question
or