Split My Page Into 2 parts (Scrolled Part and Fixed Part with no Scrolling)

I have asp.net page and it has 2 controls Grid View and Button ...i want to devide it into 2 parts i want to allow Scrolling in Grid View only but make button come in Fixed place appear all over the page even in in scrolling no disappear in scrolling

Re: Split My Page Into 2 parts (Scrolled Part and Fixed Part with no Scrolling)

Ajax is your friend :}

http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/AlwaysVisibleControl/AlwaysVisibleControl.aspx

Re: Split My Page Into 2 parts (Scrolled Part and Fixed Part with no Scrolling)

Hello,

Simply set the position:fixed for the button. See the sample app I created for you

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
</head>
<body>
    <form id="form1" runat="server">
    <div style="position: fixed">
        <asp:Button ID="Button1" runat="server" Text="Button" />
    </div>
    <div style="width: 200px; height: 1200px; background-color: Red">
        <div>
        </div>
    </div>
    </form>
</body>
</html>

Re: Split My Page Into 2 parts (Scrolled Part and Fixed Part with no Scrolling)

If The container fixed position div is the second div not the first one it will disappear

Re: Split My Page Into 2 parts (Scrolled Part and Fixed Part with no Scrolling)

Hi,

AhmedHusseinITI
If The container fixed position div is the second div not the first one it will disappear

What? I don't understand. Can you be please more precise?

Re: Split My Page Into 2 parts (Scrolled Part and Fixed Part with no Scrolling)

Try That

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
</head>
<body>
    <form id="form1" runat="server">
    <div style="width: 200px; height: 1200px; background-color: Red">
        <div>
        </div>
    </div>
    <div style="position: fixed">
        <asp:Button ID="Button1" runat="server" Text="Button" />
    </div>

    </form>
</body>
</html>

Re: Split My Page Into 2 parts (Scrolled Part and Fixed Part with no Scrolling)

Any Suggestions about that Ruchira

Re: Split My Page Into 2 parts (Scrolled Part and Fixed Part with no Scrolling)

Hi, where do you want the button stay on the page? You can refer to the following example, with it, the button will stay 20px from top and 20px from left.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
</head>
<body>
    <form id="form1" runat="server">
    <div style="width: 200px; height: 1200px; background-color: Red">
        <div>
        </div>
    </div>
    <div style="position: fixed; top: 20px; left: 20px">
        <asp:Button ID="Button1" runat="server" Text="Button" />
    </div>
    </form>
</body>
</html>

Re: Split My Page Into 2 parts (Scrolled Part and Fixed Part with no Scrolling)

I want The Second Bottom Div be fixed in the page ...appears even in scroll ...come above anything...but to be in the bottom of the page

Re: Split My Page Into 2 parts (Scrolled Part and Fixed Part with no Scrolling)

Hi, please try:

<div style="position: fixed; bottom:0px; left: 20px">
        <asp:Button ID="Button1" runat="server" Text="Button" />
    </div>