locked
Fixed div at the top and scrollable div below RRS feed

  • Question

  • User113730038 posted

    I am close but what happens is the bottom div scrolls BEHIND the top div.  I want it to scroll UNDER it instead.  I have a default page and it takes data tables from an XML file and does a simple bind then adds the control to the page with the grid (telerik radgrid).  Here is my page:

    <%@ Control Language="vb" AutoEventWireup="false" CodeBehind="ucLine.ascx.vb" Inherits="ShipShort.ucLine" %>
    <%@ Register Assembly="Telerik.Web.UI, Version=2016.2.607.40, Culture=neutral, PublicKeyToken=121fae78165ba3d4" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
    
    <div style="; height: 800px; margin-left: 35%; z-index: 999">
        <div style="text-align: center">
            <asp:Label ID="lblTime" runat="server" Font-Names="Verdana" Text="" Font-Size="24px"></asp:Label>
        </div> 
        <br />
        <telerik:RadGrid ID="grdSummary" BorderStyle="none" ForeColor="Black" runat="server" >                                                                                                           
        </telerik:RadGrid>     
        <br />  
    </div>
    <br />
    <div style="; left: 0; right: 0; margin-top: 95px; top: 10px" >
        <table style="width: 100%">
            <tr>
                <td>
                    <table>
                        <tr>                      
                            <td style="width: 600px">
                                <asp:Label ID="lblLine" Font-Names="Verdana" runat="server" ForeColor="Black" Text="" Font-Size="24px"></asp:Label>
                            </td>                                 
                         </tr>
                    </table>
                </td>
            </tr>    
        </table>
        <telerik:RadGrid ID="grdDetail" BorderStyle="none" runat="server" ForeColor="Black" GridLines="None" style="margin-top: 3px">                                                                                                        
        </telerik:RadGrid> 
    </div>
    

    If I could add a pic I would.  Any help is appreciated.

    Wednesday, January 18, 2017 7:31 PM

Answers

  • User113730038 posted

    So I moved my divs to the default page and now it's working  Here is my default page HTML:

    <div style="top: 0; margin-left: 35%; height:200px;">                                              
                    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                        <ContentTemplate>
                            <table style="width:100%">
                                <tr>
                                    <td>
                                        <asp:PlaceHolder ID="phSummary" runat="server">                                                   
                                        </asp:PlaceHolder>
                                    </td>                                            
                                </tr>                            
                            </table>
                        </ContentTemplate>                                
                    </asp:UpdatePanel>                       
                </div>           
                <div style="left: 0; right: 0; margin-top: 95px; top: 10px; height: 600px; overflow-y: scroll" >                                              
                    <asp:UpdatePanel ID="UpdatePanel2" runat="server">
                        <ContentTemplate>
                            <table style="width:100%">
                                <tr>
                                    <td>
                                        <asp:PlaceHolder ID="phDetail" runat="server">
                                                       
                                        </asp:PlaceHolder>
                                    </td>                                            
                                </tr>                           
                            </table>
                        </ContentTemplate>                                
                    </asp:UpdatePanel>                       
                </div>                

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, January 19, 2017 6:56 PM

All replies

  • User-1838255255 posted

    Hi skister77,

    According to your description, as far as I know, your wanted is fix header(table header) then make table content can scroll. I make a sample for your reference, in my sample I use a table to simulate your data from xml. Please refer to this sample Style to modify your page:

    <head>
        <title></title>
        <style>
            body {
                margin: 0;
            }
    
            ul {
                list-style-type: none;
                margin: 0;
                padding: 0;
                overflow: hidden;
                background-color: #333;
                ;
                top: 0;
                width: 100%;
            }
    
            li {
                float: left;
            }
    
                li a {
                    display: block;
                    color: white;
                    padding: 16px;
                    padding-left: 60px;
                    text-decoration: none;
                }
    
            .main {
                overflow: auto;
                padding: 16px;
                margin-top: 30px;
                height: 1500px; /* Used in this example to enable scrolling */
            }
    
            table {
                border-collapse: collapse;
                width: 60%;
            }
    
            td, th {
                border: 1px solid #dddddd;
                text-align: left;
                padding: 30px;
            }
        </style>
    </head>
    <body>
        <ul>
            <li><a href="#home">name</a></li>
            <li><a href="#home">sex</a></li>
            <li><a href="#home">Age</a></li>
            <li><a href="#home">email</a></li>
            <li><a href="#home">job</a></li>
            <li><a href="#home">location</a></li>
            <li><a href="#home">brt day</a></li>
        </ul>
        <div class="main">
            <table>
                <tr>
                    <td>Alfreds</td>
                    <td>male</td>
                    <td>34</td>
                    <td>8989@outlook.com</td>
                    <td>IT</td>
                    <td>New York</td>
                    <td>2010-12-3</td>
                </tr>
                <tr>
                    <td>Alfreds</td>
                    <td>male</td>
                    <td>34</td>
                    <td>8989@outlook.com</td>
                    <td>IT</td>
                    <td>New York</td>
                    <td>2010-12-3</td>
                </tr>
                <tr>
                    <td>Alfreds</td>
                    <td>male</td>
                    <td>34</td>
                    <td>8989@outlook.com</td>
                    <td>IT</td>
                    <td>New York</td>
                    <td>2010-12-3</td>
                </tr>
                <tr>
                    <td>Alfreds </td>
                    <td>male</td>
                    <td>34</td>
                    <td>8989@outlook.com</td>
                    <td>IT</td>
                    <td>New York</td>
                    <td>2010-12-3</td>
                </tr>
                <tr>
                    <td>Alfreds</td>
                    <td>male</td>
                    <td>34</td>
                    <td>8989@outlook.com</td>
                    <td>IT</td>
                    <td>New York</td>
                    <td>2010-12-3</td>
                </tr>
                <tr>
                    <td>Alfreds</td>
                    <td>male</td>
                    <td>34</td>
                    <td>8989@outlook.com</td>
                    <td>IT</td>
                    <td>New York</td>
                    <td>2010-12-3</td>
                </tr>
            </table>
        </div>
    </body>

    Result:

    Best Regards,

    Eric Du

    Thursday, January 19, 2017 5:33 AM
  • User113730038 posted

    It works for you but not for my divs.  Here is what I have, am I missing something:?

    <div style="margin: 0; padding: 0; overflow: hidden; ; top: 0; float: left">
        <div style="text-align: center">
            <asp:Label ID="lblTime" runat="server" Font-Names="Verdana" Text="" Font-Size="24px"></asp:Label>
        </div> 
        <br />
        <telerik:RadGrid ID="grdSummary" BorderStyle="none" ForeColor="Black" runat="server" >                                                                                                           
        </telerik:RadGrid>     
        <br />  
    </div>
    <br />
    <div style="overflow: auto; margin-top: 100px; height: auto" >
        <table style="width: 100%">
            <tr>
                <td>
                    <table>
                        <tr>                      
                            <td style="width: 600px">
                                <asp:Label ID="lblLine" Font-Names="Verdana" runat="server" ForeColor="Black" Text="" Font-Size="24px"></asp:Label>
                            </td>                                 
                         </tr>
                    </table>
                </td>
            </tr>    
        </table>
        <telerik:RadGrid ID="grdDetail" BorderStyle="none" runat="server" ForeColor="Black" GridLines="None" style="margin-top: 3px">                                                                                                        
        </telerik:RadGrid> 
    </div>

    Thursday, January 19, 2017 1:01 PM
  • User113730038 posted

    Heres my code in the default page:

     <form id="form1" runat="server" style="width: 1800px">  
                <ajaxToolkit:ToolkitScriptManager runat="server" EnablePartialRendering="true" ID="ToolScriptManager1" AsyncPostBackTimeout="600"></ajaxToolkit:ToolkitScriptManager>                      
                <div>                 
                    <asp:Label ID="lblMessage" Font-Size="36px" ForeColor="Red" Font-Bold="true" runat="server" Text=""></asp:Label>                  
                    <table style="width:100%">                          
                        <tr>                                                                              
                            <td>                            
                                <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                                    <ContentTemplate>
                                        <table style="width:100%">
                                            <tr>
                                                <td>
                                                    <asp:PlaceHolder ID="phShipShort" runat="server">
                                                       
                                                    </asp:PlaceHolder>
                                                </td>                                            
                                            </tr>
                                        </table>
                                    </ContentTemplate>                                
                                </asp:UpdatePanel>
                            </td>
                        </tr>                  
                    </table> 
                </div>           
            </form>

    I build and add user controls to the placeholder, the div code is on the user control.

    Thursday, January 19, 2017 1:09 PM
  • User113730038 posted

    hope you can see the image, nope.  anyway the bottom div is still scrolling under the top div.  Any way to make the top div where to bottom doesn't scroll behind it based on my HTML?

    Thursday, January 19, 2017 2:16 PM
  • User113730038 posted

    So I moved my divs to the default page and now it's working  Here is my default page HTML:

    <div style="top: 0; margin-left: 35%; height:200px;">                                              
                    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                        <ContentTemplate>
                            <table style="width:100%">
                                <tr>
                                    <td>
                                        <asp:PlaceHolder ID="phSummary" runat="server">                                                   
                                        </asp:PlaceHolder>
                                    </td>                                            
                                </tr>                            
                            </table>
                        </ContentTemplate>                                
                    </asp:UpdatePanel>                       
                </div>           
                <div style="left: 0; right: 0; margin-top: 95px; top: 10px; height: 600px; overflow-y: scroll" >                                              
                    <asp:UpdatePanel ID="UpdatePanel2" runat="server">
                        <ContentTemplate>
                            <table style="width:100%">
                                <tr>
                                    <td>
                                        <asp:PlaceHolder ID="phDetail" runat="server">
                                                       
                                        </asp:PlaceHolder>
                                    </td>                                            
                                </tr>                           
                            </table>
                        </ContentTemplate>                                
                    </asp:UpdatePanel>                       
                </div>                

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, January 19, 2017 6:56 PM