Bottom of scrollbar is cut off in browser

3 posts, 0 answers
  1. Nicko
    Nicko avatar
    5 posts
    Member since:
    Jul 2010

    Posted 07 Sep 2010 Link to this post

    I trying to use a rad splitter within a fixed header. There is a left pane for navigation and notification and a main content pane. The bottom portion of the scroll bar gets cut off and I can't figure out what I am doing wrong. I would really appreciate anyone who can point me in the right direction. Below is the code and attached is a screen shot of what I am ending up with.


    <?xml version="1.0" encoding="iso-8859-1"?>
      
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
      
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
      
      
      
      
    <head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
      
        <title></title>
      
        <asp:ContentPlaceHolder ID="HeadContent" runat="server">
        </asp:ContentPlaceHolder>
      
    <style type="text/css"
      
    html, body, form
    {
       
      height: 100%;   
       margin: 0px;   
       padding: 0px
        
          
    }
      
    html {
      
    height:100%
    max-height:100%
    padding:0;
    margin:0
    border:0
      
    /* hide overflow:hidden from IE5/Mac */ 
      
    overflow: visible
      
    }
      
    body {  
      
            height:100%
            max-height:100%
            overflow:hidden
            padding:0
            margin:0
            border:0;
              
            background:#fff
            font-family:arial, verdana, sans-serif
            font-size:76%;
            min-width:550px;
              
          
      
    }
      
      
    #container 
    {
          
        overflow:auto
        position:absolute
        z-index:3
        height:100%
        top:104px
        bottom:0px
        left:0px
        right:0
        width: 100%
        margin-bottom:200px;
          
    }
      
    * html #container 
    {
        top:0
        left:0
        right:0
        bottom:0px
        height:100%
        max-height:100%
        width:100%
        overflow:auto
        position:relative
        z-index:3
          
    }
      
      
      
      
    #header {
        
      position:absolute
      margin:0
      top:0
      left:0
      display:block
      width:100%
      height:100px;  
      z-index:5
      overflow:visible
      border-bottom: #ccc 4px solid;    
        padding:0px;  
      text-align:left;
      
    }
      
      
      
      
    </style>
      
      
    </head>
      
      
    <body >
      
      
        <form id="form1" runat="server"  >
      
          
      
    <div id="container">
      
      
      <telerik:RadScriptManager ID="RadScriptManager1" runat="server" />
        <telerik:RadSkinManager ID="RadSkinManager1" runat="server" Skin="Vista" />
        <telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" Skin="Vista" />
      
      
      
      
      
      
        <telerik:RadSplitter ID="RadSplitter1" runat="server"   BorderSize="0"  CssClass="radSplitter" Width="100%" Height="100%"  >
      
            <telerik:RadPane ID="LeftPane" runat="server" Width="180px" MaxWidth="300"   >
             
           <div id="leftColumnContent">
        <h4>Logged in as:</h4>
        <hr />
      
        <telerik:RadPanelBar runat="server" ID="RadPanelBar1"  Width="150"    >
                <Items>
                    <telerik:RadPanelItem Expanded="True" Text="Pending Items">
                        <Items>
                            <telerik:RadPanelItem Text="Pending Item 1" NavigateUrl="Error.aspx">
                            </telerik:RadPanelItem>
      
      
                        </Items>
                    </telerik:RadPanelItem>
                      
      
                </Items>
            </telerik:RadPanelBar>
            </div>
      
      
            </telerik:RadPane>
       
            <telerik:RadSplitBar ID="RadSplitBar1" runat="server" CollapseMode="Forward"  />
      
            <telerik:RadPane ID="RightPane" runat="server" Scrolling="Y"  >
       
                <div id="mainContent">
                 <asp:ContentPlaceHolder ID="MainContent" runat="server">
                          
      
      
      
                  
                </asp:ContentPlaceHolder>
                        </div>
      
            </telerik:RadPane>
      
              
      
      
        </telerik:RadSplitter>
      
      
      
    </telerik:RadSplitter>
      
      
      
      
      
      
       
    </div>
    <!-- end of container -->
      
      
      
      
    <div id="header">
    <table width="100%" border="0">
                    <tr>
                        <td>
                            <a href="/Default.aspx">
                                <img src="/Images/logo.png" width="138" height="66" vspace="10"  /></a>
                        </td>
                        <td width="100%">
                            <table cellpadding="0" cellspacing="0" width="100%" border="0">
                                <tr>
                                    <td>
                                        <div style="float: right;">
                                            <asp:TextBox ID="txtSearchBox" runat="server" Width="450" Enabled="false"></asp:TextBox> 
                                            <asp:Button ID="btnSearch" runat="server" Text="Search" Enabled="false" />
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <div style="float: right; margin-top: 5px; border-top: 2px solid #ccc; width:100%;">
                                            <div style="float: right; border:0px; margin:0px;">
                                                  
                        </div>
                                        </div>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
                <!-- end #header -->
      
      </DIV>
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
        </form>
      
      
      
    </body>
  2. Nicko
    Nicko avatar
    5 posts
    Member since:
    Jul 2010

    Posted 07 Sep 2010 Link to this post

    I figured it out. You need to set the HeightOffset property to whatever the width is of your fixed header.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 10 Sep 2010 Link to this post

    Hi Nicko,

     You are correct in your observations and this is the property you should use. The problem comes from the fact that when you set the splitter to be 100% hight it actually becomes 100% of the page and the header also has some height - as a result the sum height is more than 100% and due to setting overflow hidden, the page is cut off with the size of the header.

    You can find more detailed explanations in the article below:

    http://www.telerik.com/support/kb/aspnet-ajax/splitter/making-radsplitter-occupy-part-of-a-page-with-variable-size.aspx

    Greetings,
    Svetlina
    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