locked
How to add scroll bar in content page? RRS feed

  • Question

  • User546194788 posted

    There are about 20 content pages in application with the same master page.

    Master page only has company logo and application title.

    How to add scroll bar so that various screen resolution monitor will scroll content under master page but keep logo and title at the same position?

    Wednesday, June 19, 2019 6:25 PM

Answers

  • User665608656 posted

    Hi aspfun,

    Acoording to your description, the title and logo of the master page to be fixed at the top of the page, and you want to add scrollbars to customized content, right?

    If so,I suggest you could use overflow attribute to add scroll bar in the content page.

    First, we can use ';' to ensure the logo and title is fixed at the top of the page.

    The,set an height to the content page div and use 'overflow-y:auto;' to display a scroll bar to the content page if the content beyond page height.

    For more details,you could refer to it:

    Master page:

    <%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site1.master.cs" Inherits="WebApplication1.Cases.Site1" %>
    
    <!DOCTYPE html>
    <html>
    <head runat="server">
        <title></title>
        <style type="text/css">
            html,body {
                overflow: hidden;
                height:100%
            }
            .master {
                overflow: hidden;
                top: 0;
                ;
                width: 100%;
            }
            .personal {
                margin-top: 100px;
    width:100%; height:500px; overflow-y:auto; background-color:aliceblue; } </style> <asp:ContentPlaceHolder ID="head" runat="server"> </asp:ContentPlaceHolder> </head> <body> <form id="form1" runat="server"> <div class="master"> <div style="float: left"> <img src="Images/logo.png" height="100" /> </div> <div style="text-align: center"> <h1>Welcome to my company!</h1> </div> </div> <div class="personal"> <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"> </asp:ContentPlaceHolder> </div> </form> </body> </html>

    Content page:

    <%@ Page Title="" Language="C#" MasterPageFile="~/Cases/Site1.Master" AutoEventWireup="true" CodeBehind="WebForm_0620_2156861.aspx.cs" Inherits="WebApplication1.Cases.WebForm_0620_2156861" %>
    
    <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    
        <h1>Fixed Top Menu</h1>
        <h2>Scroll this page to see the effect</h2>
        <h2>The navigation bar will stay at the top of the page while scrolling</h2>
    
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
    
    </asp:Content>

    Another content page:

    <%@ Page Title="" Language="C#" MasterPageFile="~/Cases/Site1.Master" AutoEventWireup="true" CodeBehind="WebForm_master_2.aspx.cs" Inherits="WebApplication1.Cases.WebForm_master_2" %>
    <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataSourceID="SqlDataSource1" Width="100%" RowStyle-HorizontalAlign="Center">
            <Columns>
                <asp:BoundField DataField="Name" HeaderText="Name" SortExpression="Name" />
                <asp:BoundField DataField="Age" HeaderText="Age" SortExpression="Age" />
                <asp:BoundField DataField="DepositAmount" HeaderText="DepositAmount" SortExpression="DepositAmount" />
                <asp:BoundField DataField="WithDrawAmount" HeaderText="WithDrawAmount" SortExpression="WithDrawAmount" />
            </Columns>
        </asp:GridView>
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>" SelectCommand="SELECT * FROM [entity]"></asp:SqlDataSource>
    </asp:Content>
    

    The result of my work demo:

    Best Regards,

    YongQing.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, June 20, 2019 2:37 AM
  • User665608656 posted

    Hi aspfun,

    According to your issue,I suggest you to use @media rule in the css style which could help you solve the issue about different screen resolution.

    This is a tutorial on @media rule, you could refer to it:

    https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

    And here is an example about this rule :

    https://www.codeproject.com/Articles/762201/Adjusting-your-websites-to-fit-all-types-of-resolu

    Best Regards,

    YongQing.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, June 24, 2019 12:54 AM

All replies

  • User665608656 posted

    Hi aspfun,

    Acoording to your description, the title and logo of the master page to be fixed at the top of the page, and you want to add scrollbars to customized content, right?

    If so,I suggest you could use overflow attribute to add scroll bar in the content page.

    First, we can use ';' to ensure the logo and title is fixed at the top of the page.

    The,set an height to the content page div and use 'overflow-y:auto;' to display a scroll bar to the content page if the content beyond page height.

    For more details,you could refer to it:

    Master page:

    <%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site1.master.cs" Inherits="WebApplication1.Cases.Site1" %>
    
    <!DOCTYPE html>
    <html>
    <head runat="server">
        <title></title>
        <style type="text/css">
            html,body {
                overflow: hidden;
                height:100%
            }
            .master {
                overflow: hidden;
                top: 0;
                ;
                width: 100%;
            }
            .personal {
                margin-top: 100px;
    width:100%; height:500px; overflow-y:auto; background-color:aliceblue; } </style> <asp:ContentPlaceHolder ID="head" runat="server"> </asp:ContentPlaceHolder> </head> <body> <form id="form1" runat="server"> <div class="master"> <div style="float: left"> <img src="Images/logo.png" height="100" /> </div> <div style="text-align: center"> <h1>Welcome to my company!</h1> </div> </div> <div class="personal"> <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"> </asp:ContentPlaceHolder> </div> </form> </body> </html>

    Content page:

    <%@ Page Title="" Language="C#" MasterPageFile="~/Cases/Site1.Master" AutoEventWireup="true" CodeBehind="WebForm_0620_2156861.aspx.cs" Inherits="WebApplication1.Cases.WebForm_0620_2156861" %>
    
    <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    
        <h1>Fixed Top Menu</h1>
        <h2>Scroll this page to see the effect</h2>
        <h2>The navigation bar will stay at the top of the page while scrolling</h2>
    
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
    
    </asp:Content>

    Another content page:

    <%@ Page Title="" Language="C#" MasterPageFile="~/Cases/Site1.Master" AutoEventWireup="true" CodeBehind="WebForm_master_2.aspx.cs" Inherits="WebApplication1.Cases.WebForm_master_2" %>
    <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataSourceID="SqlDataSource1" Width="100%" RowStyle-HorizontalAlign="Center">
            <Columns>
                <asp:BoundField DataField="Name" HeaderText="Name" SortExpression="Name" />
                <asp:BoundField DataField="Age" HeaderText="Age" SortExpression="Age" />
                <asp:BoundField DataField="DepositAmount" HeaderText="DepositAmount" SortExpression="DepositAmount" />
                <asp:BoundField DataField="WithDrawAmount" HeaderText="WithDrawAmount" SortExpression="WithDrawAmount" />
            </Columns>
        </asp:GridView>
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>" SelectCommand="SELECT * FROM [entity]"></asp:SqlDataSource>
    </asp:Content>
    

    The result of my work demo:

    Best Regards,

    YongQing.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, June 20, 2019 2:37 AM
  • User546194788 posted

    Thank you. 

    Your sample works as expected.

    Thursday, June 20, 2019 11:47 AM
  • User665608656 posted

    Hi aspfun,

    If my reply is helpful to you, you can mark it as an answer, which will help other people to solve the similar issue more conveniently.

    Thank you!

    Best Regards,

    YongQing.

    Friday, June 21, 2019 1:11 AM
  • User546194788 posted

    One more question.

    Users' monitors have two screen resolution, 1920x1080 and 1280x720.

    I use high resolution monitor to work but once move to low resolution monitor scroll bar did work as expect.

    Do you have any suggestion?

    Friday, June 21, 2019 10:40 AM
  • User665608656 posted

    Hi aspfun,

    According to your issue,I suggest you to use @media rule in the css style which could help you solve the issue about different screen resolution.

    This is a tutorial on @media rule, you could refer to it:

    https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

    And here is an example about this rule :

    https://www.codeproject.com/Articles/762201/Adjusting-your-websites-to-fit-all-types-of-resolu

    Best Regards,

    YongQing.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, June 24, 2019 12:54 AM
  • User546194788 posted

    Thank you.

    Monday, June 24, 2019 11:17 AM