During the development process, some queries are often made, such as selecting conditions at the top of the page, and the query results are displayed below.
If there are too many query results, the scroll bar on the right of the page starts to work. As a result, when you view the following query results, the selection of conditions is invisible (dragged beyond the visible range above)
A simple Div can prevent this situation.
Site.css:
- . Divfix
- {
- Height: 200px;
- Width: 100%;
- Overflow: Scroll;
- Position: absolute;
- }
- Th {Z-INDEX: 49; top: expression (this. offsetparent. scrollTop-1); position: relative ;}
HTML:
- <HTML xmlns = "http://www.w3.org/1999/xhtml">
- <Head runat = "server">
- <Title> untitled page </title>
- <Link id = "link1" type = "text/CSS" href = "site.css" runat = "server" rel = "stylesheet"/>
- <SCRIPT type = "text/JavaScript">
- Function show ()
- {
- Document. getelementbyid ("mydiv"). style. Display = "Block ";
- }
- </SCRIPT>
- </Head>
- <Body>
- <Form ID = "form1" runat = "server">
- <Asp: scriptmanager id = "scriptmanager1" runat = "server"/>
- <Asp: button id = "button1" runat = "server" onclientclick = "show ()" onclick = "button#click" text = "button"/>
- <Div>
- <Asp: updatepanel id = "updatepanel1" runat = "server">
- <Contenttemplate>
- <Div id = "mydiv" runat = "server" style = "display: none; left: 50%">
- </Div>
- <Div class = "divfix">
- <Asp: gridview id = "gvshow" runat = "server" autogeneratecolumns = "false"
- Width = "881px" Height = "270px" cellpadding = "4" forecolor = "#333333">
- <Columns>
- <Asp: templatefield>
- <Itemtemplate>
- <Asp: button id = "btnedit" runat = "server" text = "modify" commandname = "modify"/>
- </Itemtemplate>
- </ASP: templatefield>
- <Asp: templatefield>
- <Itemtemplate>
- <Asp: button id = "btndel" runat = "server" text = "delete" commandname = "Del"/>
- </Itemtemplate>
- </ASP: templatefield>
- <Asp: boundfield datafield = "ID" headertext = "ID"/>
- <Asp: boundfield datafield = "name" headertext = "name"/>
- </Columns>
- </ASP: gridview>
- </Div>
- </Contenttemplate>
- <Triggers>
- <Asp: asyncpostbacktrigger controlid = "button1" eventname = "click"/>
- </Triggers>
- </ASP: updatepanel>
- </Div>
- </Form>
- </Body>
Note:
1. When Div mydiv is used for asynchronous jobs, dynamic information (such as a dynamic image) is displayed)
2. If mydiv is not displayed at the beginning, click "button. After the event is completed, mydiv returns to the initial state due to the sending-back mechanism: invisible
