Scrolling problem with radSplitter

6 posts, 0 answers
  1. Elad
    Elad avatar
    13 posts
    Member since:
    Jan 2009

    Posted 07 Jun 2009 Link to this post

    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:
    1 <%@ Page language="C#"%>   
    2 <%@ Register Assembly="Telerik.Web.UI, Version=2009.1.311.35, Culture=neutral, PublicKeyToken=121fae78165ba3d4" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
    3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
    4 <html xmlns="http://www.w3.org/1999/xhtml">  
    5 <head runat="server">  
    6 <title>test</title>     
    7 <style type="text/css">  
    8     html,body,form{  
    9     height:100%;  
    10     width:100%;  
    11 }  
    12 </style> 
    13 </head> 
    14 <body> 
    15     <form id="form1" runat="server">  
    16         <asp:ScriptManager ID="ScriptManager1" runat="server" /> 
    17         <telerik:radSplitter runat="server" ID="mainSplitter" FullScreenMode="true" Orientation="Horizontal" BorderSize="0">  
    18         <telerik:RadPane runat="server" ID="header" Height="120px">  
    19             header  
    20         </telerik:RadPane> 
    21         <telerik:RadPane runat="server" ID="content">  
    22             <telerik:RadSplitter Orientation="Vertical" runat="server" ID="InternalSplitter">  
    23                 <telerik:RadPane ID="ContentPane" runat="server">  
    24                     content  
    25                 </telerik:RadPane> 
    26                 <telerik:RadPane ID="SidePane" runat="server">  
    27                     side  
    28                 </telerik:RadPane> 
    29             </telerik:RadSplitter> 
    30         </telerik:RadPane> 
    31         </telerik:RadSplitter> 
    32     </form> 
    33 </body> 
    34 </html> 
    35  
    36  

    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.

  2. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 08 Jun 2009 Link to this post

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

    Posted 21 Jun 2009 Link to this post

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

    Posted 23 Jun 2009 Link to this post

    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.
  6. scvn80
    scvn80 avatar
    8 posts
    Member since:
    Sep 2009

    Posted 28 Aug 2013 Link to this post

    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.
  7. brian
    brian avatar
    36 posts
    Member since:
    Jul 2010

    Posted 29 Aug 2013 Link to this post

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