Purpose
I am building an ASPX website. It is a form type of webpage, there are 55 questions. For each question, there are three answers, and to lay these out a use a CSS grid style to make sure everything is spaced consistently. We have C# code behind for this form.
Issue
The MaintainScrollPositionOnPostBack="true" is not working and we need it to. My team and I have troubleshooted quite a bit and there is no success. We do not know where to look at this point. Any direction to move forward/look into would be appreciated.
Context
For the design period, this website was built in HTML initially, and then dropped into the ASP.NET website and we have had to rewrite some things to cater to the ASP.NET and the code behind. Troubleshooting this has us really stumped. Something is interfering with MaintainScrollPositionOnPostBack="true", and we do not know what.
Things to Consider:
1). We have used a grid display for within each question. 2). We have a sitemaster with a vertical navigation bar that is applied to the site. I have went ahead and included that info. 3). We have C# kind of handling the maintain scroll position on postback, but it is not mimicking the behavior we want to see. As we are tabbing down the page, selecting answers for the questions, the answer we select shifts that answer down to the very bottom of the page. So this shifts the page around in an unpleasant way. See below:
Goal:
When any button is pressed, and by default, a postback is initiated, we want the scroll position in the page to be stay where it was pre-postback. Since users will be using this as a form, we want the most seamless experience as you complete the questions.
OSTA.aspx (I included 5 of the 55 questions.)
<%@ Page Title="SADET - OSTA Form" Language="C#" MaintainScrollPositionOnPostBack="true" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="OSTA.aspx.cs" Inherits="SADET_2025.OSTA" EnableEventValidation="false"%>
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
<link rel="stylesheet" href="Content/OSTA.css"/>
<link rel="stylesheet" href="Content/bootstrap.min2.css"/>
<script src="Content/popper.min.js"></script>
<main aria-labelledby="title">
<!-- File Information -->
<div class="textFields bottom-line">
<div class="fileInfoHeader">
<p>File Information</p>
</div>
<div>
<div>
<p>File Number</p>
<textarea class="form-control" rows="1" name="OSTAFileNumber" id="OSTAFileNumber" maxlength="49" Runat="Server" TabIndex="7"></textarea>
</div>
<br>
<div>
<p>Escrow Officer</p>
<textarea class="form-control" rows="1" name="OSTAEscrowOfficer" id="OSTAEscrowOfficer" maxlength="49" Runat="Server" TabIndex="8"></textarea>
</div>
</div>
<div>
<div>
<p>Flash</p>
<textarea class="form-control" rows="1" name="OSTAFlash" id="OSTAFlash" maxlength="49" Runat="Server" TabIndex="9"></textarea>
</div>
<br>
<div>
<p>Date Closed</p>
<input class="form-control" type="date" value="" name="OSTADateClosed" id="OSTADateClosed" maxlength="49" Runat="Server" TabIndex="10">
</div>
</div>
<div>
<div>
<p>Branch</p>
<textarea class="form-control" rows="1" name="OSTABranch" id="OSTABranch" maxlength="49" Runat="Server" TabIndex="11"></textarea>
</div>
<br>
<div>
<div>
<p>Transaction Type</p>
<select class="form-select" aria-label="Default select example" name="OSTATransactionType" id="OSTATransactionType" Runat="Server" TabIndex="12">
<option value="1">Residential Sale</option>
<option value="2">Refinance</option>
<option value="3">Other</option>
</select>
</div>
</div>
</div>
<div>
<div style="padding-top: 4%;">
<p>Transaction Amount ($)</p>
<input class="form-control" type="number" step="1.00" min="0" placeholder="0.00" name="OSTATransactionAmount" id="OSTATransactionAmount" maxlength="49" Runat="Server" TabIndex="13">
</div>
<br>
<div style="padding-top: 1%;">
<p>Exception Percentage
<a class="d-inline-block" style="padding-right: 0.75%;" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="This is the execpetion percentage score for this file." data-bs-custom-class="custom-tooltip">
<img src="Images/info-circle.png" alt="Information Icon">
</a>
</p>
<!--<p><b>4%</b></p>-->
<div style="padding-right: 35%; padding-left: 35%;">
<asp:TextBox ID="OSTAExceptionPercentage" style="text-align: center;" Width="85px" visible="true" runat="server" placeholder="0.0" MaxLength="6" CssClass="form-control" ReadOnly="true" TabIndex="14"/>
</div>
</div>
</div>
</div>
<!-- OSTA Attributes (Questions 1-55) -->
<div class="attributes">
<!-- High Risk Attributes Red Header (1-39) -->
<div class="redHR">
<h2>High Risk Attributes</h2>
<hr>
</div>
<!-- Question 1 -->
<div class="question">
<p><b>
1).
</b> CD Delivered Timely
<a class="d-inline-block" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-custom-class="custom-tooltip" data-bs-title="Holding Escrow files are properly monitored, approved, and documented. Refer to the Office Audit Checklist for further
details.">
<img src="Images/info-circle.png" alt="Information Icon">
</a>
</p>
<div class="attributeButtons">
<div class="buttonPadding">
<asp:Button ID="OSTAQ1Button1asp" CssClass="btn btn-primary unique" style="width:150px; height:50px" ForeColor="DimGray" BackColor="Transparent" BorderColor="DimGray" runat="server" Text="Pass" OnClick="OSTAQ1Button1Click" TabIndex="15"/>
</div>
<div class="buttonPadding">
<asp:Button ID="OSTAQ1Button2asp" CssClass="btn btn-primary unique" style="width:150px; height:50px" ForeColor="DimGray" BackColor="Transparent" BorderColor="DimGray" runat="server" Text="Fail" OnClick="OSTAQ1Button2Click" TabIndex="16"/>
</div>
<div class="buttonPadding">
<asp:Button ID="OSTAQ1Button3asp" CssClass="btn btn-primary unique" style="width:150px; height:50px" ForeColor="DimGray" BackColor="Transparent" BorderColor="DimGray" runat="server" Text="N/A" OnClick="OSTAQ1Button3Click" TabIndex="17"/>
</div>
<div class="commentContainer">
<asp:TextBox ID="OSTAQ1CommentBoxasp" visible="false" runat="server" TextMode="MultiLine" CssClass="commentBoxStyle" placeholder="Additional Comments" MaxLength="254" TabIndex="18"/>
</div>
</div>
<h6>Evidence exists that the Closing Disclosure (“CD”) was provided to the seller on or before consummation in accordance with
Tech Memo 165-2015.</h6>
</div>
<br>
<hr>
<!-- Question 2 -->
<div class="question">
<p><b>
2).
</b> Wires Verified
<a class="d-inline-block" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-custom-class="custom-tooltip" data-bs-title="Verbal verification of ALL wires and/or wire disbursement changes was made in accordance with the current updated Escrow Fraud Memo.">
<img src="Images/info-circle.png" alt="Information Icon">
</a>
</p>
<div class="attributeButtons">
<div class="buttonPadding">
<asp:Button ID="OSTAQ2Button1asp" CssClass="btn btn-primary unique" style="width:150px; height:50px" ForeColor="DimGray" BackColor="Transparent" BorderColor="DimGray" runat="server" Text="Pass" OnClick="OSTAQ2Button1Click" TabIndex="19"/>
</div>
<div class="buttonPadding">
<asp:Button ID="OSTAQ2Button2asp" CssClass="btn btn-primary unique" style="width:150px; height:50px" ForeColor="DimGray" BackColor="Transparent" BorderColor="DimGray" runat="server" Text="Fail" OnClick="OSTAQ2Button2Click" TabIndex="20"/>
</div>
<div class="buttonPadding">
<asp:Button ID="OSTAQ2Button3asp" CssClass="btn btn-primary unique" style="width:150px; height:50px" ForeColor="DimGray" BackColor="Transparent" BorderColor="DimGray" runat="server" Text="N/A" OnClick="OSTAQ2Button3Click" TabIndex="21"/>
</div>
<div class="commentContainer">
<asp:TextBox ID="OSTAQ2CommentBoxasp" visible="false" runat="server" TextMode="MultiLine" CssClass="commentBoxStyle" placeholder="Additional Comments" MaxLength="254" TabIndex="22"/>
</div>
</div>
<h6>Verbal verification of ALL wires and/or wire disbursement changes was made in accordance with the current updated Escrow
Fraud Memo, which requires the notation of the name of the person who verified the information, the phone number called,
and the date and time of the call.</h6>
</div>
<br>
<hr>
<!-- Question 3 -->
<div class="question">
<p><b>
3).
</b> Purchase Contract/Lenders Inst followed
<a class="d-inline-block" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-custom-class="custom-tooltip" data-bs-title="Escrow transactions were conducted in compliance with the purchase agreement and/or escrow instructions and lender’s instructions.">
<img src="Images/info-circle.png" alt="Information Icon">
</a>
</p>
<div class="attributeButtons">
<div class="buttonPadding">
<asp:Button ID="OSTAQ3Button1asp" CssClass="btn btn-primary unique" style="width:150px; height:50px" ForeColor="DimGray" BackColor="Transparent" BorderColor="DimGray" runat="server" Text="Pass" OnClick="OSTAQ3Button1Click" TabIndex="23"/>
</div>
<div class="buttonPadding">
<asp:Button ID="OSTAQ3Button2asp" CssClass="btn btn-primary unique" style="width:150px; height:50px" ForeColor="DimGray" BackColor="Transparent" BorderColor="DimGray" runat="server" Text="Fail" OnClick="OSTAQ3Button2Click" TabIndex="24"/>
</div>
<div class="buttonPadding">
<asp:Button ID="OSTAQ3Button3asp" CssClass="btn btn-primary unique" style="width:150px; height:50px" ForeColor="DimGray" BackColor="Transparent" BorderColor="DimGray" runat="server" Text="N/A" OnClick="OSTAQ3Button3Click" TabIndex="25"/>
</div>
<div class="commentContainer">
<asp:TextBox ID="OSTAQ3CommentBoxasp" visible="false" runat="server" TextMode="MultiLine" CssClass="commentBoxStyle" placeholder="Additional Comments" MaxLength="254" TabIndex="26"/>
</div>
</div>
<h6>Escrow transactions were conducted in compliance with the purchase agreement and/or escrow instructions and lender’s
instructions. </h6>
</div>
<br>
<hr>
<!-- Question 4 -->
<div class="question">
<p><b>
4).
</b> Date Verified
<a class="d-inline-block" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-custom-class="custom-tooltip" data-bs-title="The print date noted by the system on the principal’s Closing Statement was the same or prior to the signature date of the buyer/seller.">
<img src="Images/info-circle.png" alt="Information Icon">
</a>
</p>
<div class="attributeButtons">
<div class="buttonPadding">
<asp:Button ID="OSTAQ4Button1asp" CssClass="btn btn-primary unique" style="width:150px; height:50px" ForeColor="DimGray" BackColor="Transparent" BorderColor="DimGray" runat="server" Text="Pass" OnClick="OSTAQ4Button1Click" TabIndex="27"/>
</div>
<div class="buttonPadding">
<asp:Button ID="OSTAQ4Button2asp" CssClass="btn btn-primary unique" style="width:150px; height:50px" ForeColor="DimGray" BackColor="Transparent" BorderColor="DimGray" runat="server" Text="Fail" OnClick="OSTAQ4Button2Click" TabIndex="28"/>
</div>
<div class="buttonPadding">
<asp:Button ID="OSTAQ4Button3asp" CssClass="btn btn-primary unique" style="width:150px; height:50px" ForeColor="DimGray" BackColor="Transparent" BorderColor="DimGray" runat="server" Text="N/A" OnClick="OSTAQ4Button3Click" TabIndex="29"/>
</div>
<div class="commentContainer">
<asp:TextBox ID="OSTAQ4CommentBoxasp" visible="false" runat="server" TextMode="MultiLine" CssClass="commentBoxStyle" placeholder="Additional Comments" MaxLength="254" TabIndex="30"/>
</div>
</div>
<h6>The print date noted by the system on the principal’s Closing Statement was the same or prior to the signature date of the
buyer/seller. </h6>
</div>
<br>
<hr>
<!-- Question 5 -->
<div class="question">
<p><b>
5).
</b> Closing Statement signed by all parties
<a class="d-inline-block" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-custom-class="custom-tooltip" data-bs-title="The Closing Statement was signed by all parties to the transaction. (Even if the lender prepares the CD, we require the borrower to sign our Closing Statement as acceptance and approval of the c
harges.)">
<img src="Images/info-circle.png" alt="Information Icon">
</a>
</p>
<div class="attributeButtons">
<div class="buttonPadding">
<asp:Button ID="OSTAQ5Button1asp" CssClass="btn btn-primary unique" style="width:150px; height:50px" ForeColor="DimGray" BackColor="Transparent" BorderColor="DimGray" runat="server" Text="Pass" OnClick="OSTAQ5Button1Click" TabIndex="31"/>
</div>
<div class="buttonPadding">
<asp:Button ID="OSTAQ5Button2asp" CssClass="btn btn-primary unique" style="width:150px; height:50px" ForeColor="DimGray" BackColor="Transparent" BorderColor="DimGray" runat="server" Text="Fail" OnClick="OSTAQ5Button2Click" TabIndex="32"/>
</div>
<div class="buttonPadding">
<asp:Button ID="OSTAQ5Button3asp" CssClass="btn btn-primary unique" style="width:150px; height:50px" ForeColor="DimGray" BackColor="Transparent" BorderColor="DimGray" runat="server" Text="N/A" OnClick="OSTAQ5Button3Click" TabIndex="33"/>
</div>
<div class="commentContainer">
<asp:TextBox ID="OSTAQ5CommentBoxasp" visible="false" runat="server" TextMode="MultiLine" CssClass="commentBoxStyle" placeholder="Additional Comments" MaxLength="254" TabIndex="34"/>
</div>
</div>
<h6>The Closing Statement was signed by all parties to the transaction. </h6>
</div>
<br>
<hr>
OSTA.css
/* Body */
body {
font-family: 'Segoe UI';
background-color: #f7f3eb !important;
}
.navbar {
background-color: #ffffff !important;
}
/* Batch Information */
.batchFields {
padding-left: 1%;
padding-right: 1%;
padding-top: 2%;
padding-bottom: 1%;
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 10px;
justify-items: center;
align-items: center;
}
.batchFields p {
text-align: center;
font-size: large;
}
.batchInfoHeader {
justify-content: center;
align-items: center;
}
.batchInfoHeader p {
text-align: center;
font-size: x-large;
padding: 5%;
}
.batchFields button {
margin-top: 2.5em;
}
/* File Information */
.textFields {
padding: 1%;
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 10px;
justify-items: center;
align-items: center;
position: -webkit-sticky;
position: sticky;
top: 0;
background-color: #f7f3eb !important;
z-index: 1000;
}
.textFields p {
text-align: center;
font-size: large;
}
.fileInfoHeader {
justify-content: center;
align-items: center;
}
.fileInfoHeader p {
text-align: center;
font-size: x-large;
padding: 10%;
}
.bottom-line {
border-bottom: 1px solid lightgrey;
}
/* Attributes */
.attributes {
position: relative;
padding-top: 2%;
padding-left: 8%;
padding-right: 8%;
}
/* Attributes - Questions */
.tooltip-inner {
max-width: 500px !important;
}
.custom-tooltip .tooltip-inner {
background-color: white;
color: black;
font-size: 1.5vh;
border: 1px solid black;
}
.custom-tooltip .arrow::before {
border-right-color: white;
}
.d-inline-block {
padding-right: 0.75%;
}
.question p {
font-size: x-large;
margin: auto;
}
/* Attributes - Questions Buttons */
.btn.btn-primary unique {
width: 100%;
height: 100%;
font-size: 16px !important; /* Makes the text a little bigger */
transition: all 0.3s ease; /* Smooth transition for hover effect */
}
.btn.btn-primary.unique:hover {
color: white !important; /* Inverted color */
background-color: DimGray !important; /* Inverted background color */
border-color: DimGray !important; /* Ensure border color is consistent */
}
.attributeButtons {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 10px;
justify-items: center;
align-items: center;
padding-left: 2%;
padding-right: 2%;
height: 100vh;
overflow: auto;
}
.attributes hr {
color: #636363;
}
.redHR hr {
color: #ff3333;
}
.redHR h2 {
color: #ff3333;
text-align: center;
}
.greenHR hr {
color: #49ab51;
}
.greenHR h2 {
color: #49ab51;
text-align: center;
}
.buttonPadding {
padding: 5%;
}
.buttonPadding button {
padding: 0.5em 1em; /* Relative padding */
font-size: large; /* Relative font size */
width: 8rem; /* Relative width */
}
/* Attributes - Questions Comment Box */
mentContainer {
grid-column-start: 4;
grid-column-end: 7;
/*grid-column-end: 6;*/
}
mentBoxStyle {
border-radius: 5px;
width: 25vw;
height: 8vh;
display: inline-block;
}
/*
mentHeaderStyle {
display: none;
}
*/
/* Bottom Comment Box */
mentOverallHeaderStyle {
font-size: x-large;
}
mentOverallBoxStyle {
padding-left: 8%;
padding-right: 8%;
/*display: grid;
grid-template-columns: repeat(4, 1fr);
*/
}
mentOverallBoxStyle textarea {
width: 50%;
/*
grid-column-start: 1;
grid-column-end: 3;
*/
border-radius: 5px;
}
.submitButton {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
padding-top: 2%;
padding-bottom: 2%;
justify-items: center;
}
OSTA.aspx.cs (when we do not have control.Focus(), when a question is selected or page is refreshed, the scroll position goes to the top of the page. control.Focus() brings the scroll position to the bottom, as seen in the gif before. We want it to MAINTAIN scroll posiition)
///-------------------[ PAGE LOAD ]-------------------
protected void Page_Load(object sender, EventArgs e){
this.Page.MaintainScrollPositionOnPostBack = true;
if(Page.IsPostBack){
//is there a way to determine vertical scrolling location?
questionStatusText.Text = questionsUnanswered.ToString();
string controlName = Page.Request.Params["__EVENTTARGET"];
System.Web.UI.Control control = GetPostBackControl(this.Page);
control.Focus();
// 'center' can be changed to 'start' for top positioning or 'end' for bottom positioning
ScriptManager.RegisterStartupScript(this, this.GetType(), "scrollToControl", "scrollToControl('" + control.ClientID + "', 'center');", true);
//TRY TO MAKE THIS MORE EFFICIENT - sender?
selectedBatchNumber = OSTABatchNumberDropdownasp.Items[OSTABatchNumberDropdownasp.SelectedIndex].Text;
OSTABatchNumberDropdownasp.SelectedValue = selectedBatchNumber;
OSTAFileNumberDropdownasp.DataSource = ReadSQL("SELECT DISTINCT FileNumber FROM [SADET].[dbo].[OSTA] WHERE [Hidden] != 1 AND [BatchNumber] = '" + selectedBatchNumber + "'",null);
OSTAFileNumberDropdownasp.DataTextField = "FileNumber";
OSTAFileNumberDropdownasp.DataBind();
}else{
//ConnectAD();
OSTABatchNumberDropdownasp.DataSource = ReadSQL("SELECT DISTINCT BatchNumber FROM [SADET].[dbo].[OSTA] WHERE [Hidden] != 1 UNION SELECT DISTINCT BatchNumber FROM [SADET].[dbo].[BatchFiles]",null);
OSTABatchNumberDropdownasp.DataTextField = "BatchNumber";
OSTABatchNumberDropdownasp.DataBind();
OSTAFileNumberDropdownasp.DataSource = ReadSQL("SELECT DISTINCT FileNumber FROM [SADET].[dbo].[OSTA] WHERE [Hidden] != 1 UNION SELECT DISTINCT FileNumber FROM [SADET].[dbo].[BatchFiles]",null);
OSTAFileNumberDropdownasp.DataTextField = "FileNumber";
OSTAFileNumberDropdownasp.DataBind();
}
}
///-----------------[ END PAGE LOAD ]-----------------
OSTA.aspx (Javascript inserted)
<script>
function scrollToControl(controlId, position) {
var control = document.getElementById(controlId);
if (control) {
control.scrollIntoView({ behavior: 'smooth', block: position });
}
}
// Tooltip functionality
const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl));
// Dropdown Functionality
const dropdown = document.getElementById('transactionDropdown');
const textarea = document.getElementById('transactionType');
dropdown.addEventListener('change', function () {
textarea.value = dropdown.value;
});
// "Back to Top Button"
let mybutton = document.getElementById("topButton");
function topFunction() {
var element = document.querySelector('[tabindex="1"]');
if (element) {
element.focus();
}
}
</script>
Sitemaster
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="SADET_2025.SiteMaster" %>
<!DOCTYPE html>
<html>
<head runat="server">
<title></title>
<link href="Content/Site.css" rel="stylesheet" />
<link rel="stylesheet" href="Content/all.min.css">
<!-- <link rel="stylesheet" href=".0.0-beta3/css/all.min.css"> -->
</head>
<body>
<form id="form1" runat="server">
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-dark bg-dark" style="background-color: #ffffff !important;">
<h1><img src="Images/FNF_logo_BIG.png" style="height:70px; width:70px"/></h1>
<h1><img src="Images/DSG_LOGO.png"/></h1>
</nav>
<div class="wrapper">
<div class="sidebar">
<br />
<h1><a href="Home.aspx"><img src="Images/SADETs.png" alt="SADET"/></a></h1>
<nav>
<ul>
<li><a href="RONSA.aspx"><img src="Images/RONSA.png" alt="RONSA" /></a></li>
<li><a href="COSTA.aspx"><img src="Images/COSTA.png" alt="COSTA" /></a></li>
<li><a href="OSTA.aspx"><img src="Images/OSTA.png" alt="OSTA" /></a></li>
<!--<li><a href="About.aspx"><img src="Images/PlaceHolder.png" alt="OSTA" /></a></li>-->
<li><a href="Contact.aspx"><img src="Images/envelope.png" alt="Support" /></a></li>
</ul>
</nav>
</div>
<div class="content">
<asp:ContentPlaceHolder ID="MainContent" runat="server" />
</div>
</div>
</form>
</body>
</html>
Sitemaster.css
/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content {
margin-top: 15px;
padding-left: 15px;
padding-right: 15px;
}
/* Set widths on the form inputs since otherwise they're 100% wide */
input,
select,
textarea {
max-width: 280px;
}
/* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) {
.body-content {
padding: 0;
}
}
html, body {
height: 100%;
margin: 0;
font-family:'Segoe UI';
}
.navbar {
padding: 0;
background-color: #ffffff !important;
height: 80px;
width: 100%;
align-items: center;
flex-direction: row;
display: flex;
position: relative; /* Ensure this is set */
}
h1 {
margin: 0;
}
h1 img {
width: 200px;
height: 70px;
}
.wrapper {
display: flex;
height: calc(100vh - 80px); /* Adjust this based on the height of your navbar */
position: relative;
}
.sidebar {
width: 100px;
background-color: #383838;
padding: 15px;
box-sizing: border-box;
font-family: 'Segoe UI';
display: flex;
flex-direction: column;
align-items: center;
position: sticky;
top: 0;
}
.sidebar h1 {
margin: 0;
padding: 10px 0;
font-size: 24px;
}
.sidebar h1 img {
width: 250px;
height: 30px;
}
.sidebar h1 a {
text-decoration: none;
color: #f31414;
}
.sidebar h1 a img {
width: 90px;
height: 90px;
}
.sidebar nav ul {
list-style-type: none;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
}
.sidebar nav ul li {
margin: 10px 0;
}
.sidebar nav ul li img {
width: 80px;
height: 50px;
}
.sidebar nav ul li a {
text-decoration: none;
color: #ffffff;
}
.content {
flex-grow: 1;
box-sizing: border-box;
overflow-y: auto;
position: relative; /* testing - Alexis 2/14/25 */
}
Purpose
I am building an ASPX website. It is a form type of webpage, there are 55 questions. For each question, there are three answers, and to lay these out a use a CSS grid style to make sure everything is spaced consistently. We have C# code behind for this form.
Issue
The MaintainScrollPositionOnPostBack="true" is not working and we need it to. My team and I have troubleshooted quite a bit and there is no success. We do not know where to look at this point. Any direction to move forward/look into would be appreciated.
Context
For the design period, this website was built in HTML initially, and then dropped into the ASP.NET website and we have had to rewrite some things to cater to the ASP.NET and the code behind. Troubleshooting this has us really stumped. Something is interfering with MaintainScrollPositionOnPostBack="true", and we do not know what.
Things to Consider:
1). We have used a grid display for within each question. 2). We have a sitemaster with a vertical navigation bar that is applied to the site. I have went ahead and included that info. 3). We have C# kind of handling the maintain scroll position on postback, but it is not mimicking the behavior we want to see. As we are tabbing down the page, selecting answers for the questions, the answer we select shifts that answer down to the very bottom of the page. So this shifts the page around in an unpleasant way. See below:
Goal:
When any button is pressed, and by default, a postback is initiated, we want the scroll position in the page to be stay where it was pre-postback. Since users will be using this as a form, we want the most seamless experience as you complete the questions.
OSTA.aspx (I included 5 of the 55 questions.)
<%@ Page Title="SADET - OSTA Form" Language="C#" MaintainScrollPositionOnPostBack="true" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="OSTA.aspx.cs" Inherits="SADET_2025.OSTA" EnableEventValidation="false"%>
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
<link rel="stylesheet" href="Content/OSTA.css"/>
<link rel="stylesheet" href="Content/bootstrap.min2.css"/>
<script src="Content/popper.min.js"></script>
<main aria-labelledby="title">
<!-- File Information -->
<div class="textFields bottom-line">
<div class="fileInfoHeader">
<p>File Information</p>
</div>
<div>
<div>
<p>File Number</p>
<textarea class="form-control" rows="1" name="OSTAFileNumber" id="OSTAFileNumber" maxlength="49" Runat="Server" TabIndex="7"></textarea>
</div>
<br>
<div>
<p>Escrow Officer</p>
<textarea class="form-control" rows="1" name="OSTAEscrowOfficer" id="OSTAEscrowOfficer" maxlength="49" Runat="Server" TabIndex="8"></textarea>
</div>
</div>
<div>
<div>
<p>Flash</p>
<textarea class="form-control" rows="1" name="OSTAFlash" id="OSTAFlash" maxlength="49" Runat="Server" TabIndex="9"></textarea>
</div>
<br>
<div>
<p>Date Closed</p>
<input class="form-control" type="date" value="" name="OSTADateClosed" id="OSTADateClosed" maxlength="49" Runat="Server" TabIndex="10">
</div>
</div>
<div>
<div>
<p>Branch</p>
<textarea class="form-control" rows="1" name="OSTABranch" id="OSTABranch" maxlength="49" Runat="Server" TabIndex="11"></textarea>
</div>
<br>
<div>
<div>
<p>Transaction Type</p>
<select class="form-select" aria-label="Default select example" name="OSTATransactionType" id="OSTATransactionType" Runat="Server" TabIndex="12">
<option value="1">Residential Sale</option>
<option value="2">Refinance</option>
<option value="3">Other</option>
</select>
</div>
</div>
</div>
<div>
<div style="padding-top: 4%;">
<p>Transaction Amount ($)</p>
<input class="form-control" type="number" step="1.00" min="0" placeholder="0.00" name="OSTATransactionAmount" id="OSTATransactionAmount" maxlength="49" Runat="Server" TabIndex="13">
</div>
<br>
<div style="padding-top: 1%;">
<p>Exception Percentage
<a class="d-inline-block" style="padding-right: 0.75%;" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="This is the execpetion percentage score for this file." data-bs-custom-class="custom-tooltip">
<img src="Images/info-circle.png" alt="Information Icon">
</a>
</p>
<!--<p><b>4%</b></p>-->
<div style="padding-right: 35%; padding-left: 35%;">
<asp:TextBox ID="OSTAExceptionPercentage" style="text-align: center;" Width="85px" visible="true" runat="server" placeholder="0.0" MaxLength="6" CssClass="form-control" ReadOnly="true" TabIndex="14"/>
</div>
</div>
</div>
</div>
<!-- OSTA Attributes (Questions 1-55) -->
<div class="attributes">
<!-- High Risk Attributes Red Header (1-39) -->
<div class="redHR">
<h2>High Risk Attributes</h2>
<hr>
</div>
<!-- Question 1 -->
<div class="question">
<p><b>
1).
</b> CD Delivered Timely
<a class="d-inline-block" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-custom-class="custom-tooltip" data-bs-title="Holding Escrow files are properly monitored, approved, and documented. Refer to the Office Audit Checklist for further
details.">
<img src="Images/info-circle.png" alt="Information Icon">
</a>
</p>
<div class="attributeButtons">
<div class="buttonPadding">
<asp:Button ID="OSTAQ1Button1asp" CssClass="btn btn-primary unique" style="width:150px; height:50px" ForeColor="DimGray" BackColor="Transparent" BorderColor="DimGray" runat="server" Text="Pass" OnClick="OSTAQ1Button1Click" TabIndex="15"/>
</div>
<div class="buttonPadding">
<asp:Button ID="OSTAQ1Button2asp" CssClass="btn btn-primary unique" style="width:150px; height:50px" ForeColor="DimGray" BackColor="Transparent" BorderColor="DimGray" runat="server" Text="Fail" OnClick="OSTAQ1Button2Click" TabIndex="16"/>
</div>
<div class="buttonPadding">
<asp:Button ID="OSTAQ1Button3asp" CssClass="btn btn-primary unique" style="width:150px; height:50px" ForeColor="DimGray" BackColor="Transparent" BorderColor="DimGray" runat="server" Text="N/A" OnClick="OSTAQ1Button3Click" TabIndex="17"/>
</div>
<div class="commentContainer">
<asp:TextBox ID="OSTAQ1CommentBoxasp" visible="false" runat="server" TextMode="MultiLine" CssClass="commentBoxStyle" placeholder="Additional Comments" MaxLength="254" TabIndex="18"/>
</div>
</div>
<h6>Evidence exists that the Closing Disclosure (“CD”) was provided to the seller on or before consummation in accordance with
Tech Memo 165-2015.</h6>
</div>
<br>
<hr>
<!-- Question 2 -->
<div class="question">
<p><b>
2).
</b> Wires Verified
<a class="d-inline-block" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-custom-class="custom-tooltip" data-bs-title="Verbal verification of ALL wires and/or wire disbursement changes was made in accordance with the current updated Escrow Fraud Memo.">
<img src="Images/info-circle.png" alt="Information Icon">
</a>
</p>
<div class="attributeButtons">
<div class="buttonPadding">
<asp:Button ID="OSTAQ2Button1asp" CssClass="btn btn-primary unique" style="width:150px; height:50px" ForeColor="DimGray" BackColor="Transparent" BorderColor="DimGray" runat="server" Text="Pass" OnClick="OSTAQ2Button1Click" TabIndex="19"/>
</div>
<div class="buttonPadding">
<asp:Button ID="OSTAQ2Button2asp" CssClass="btn btn-primary unique" style="width:150px; height:50px" ForeColor="DimGray" BackColor="Transparent" BorderColor="DimGray" runat="server" Text="Fail" OnClick="OSTAQ2Button2Click" TabIndex="20"/>
</div>
<div class="buttonPadding">
<asp:Button ID="OSTAQ2Button3asp" CssClass="btn btn-primary unique" style="width:150px; height:50px" ForeColor="DimGray" BackColor="Transparent" BorderColor="DimGray" runat="server" Text="N/A" OnClick="OSTAQ2Button3Click" TabIndex="21"/>
</div>
<div class="commentContainer">
<asp:TextBox ID="OSTAQ2CommentBoxasp" visible="false" runat="server" TextMode="MultiLine" CssClass="commentBoxStyle" placeholder="Additional Comments" MaxLength="254" TabIndex="22"/>
</div>
</div>
<h6>Verbal verification of ALL wires and/or wire disbursement changes was made in accordance with the current updated Escrow
Fraud Memo, which requires the notation of the name of the person who verified the information, the phone number called,
and the date and time of the call.</h6>
</div>
<br>
<hr>
<!-- Question 3 -->
<div class="question">
<p><b>
3).
</b> Purchase Contract/Lenders Inst followed
<a class="d-inline-block" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-custom-class="custom-tooltip" data-bs-title="Escrow transactions were conducted in compliance with the purchase agreement and/or escrow instructions and lender’s instructions.">
<img src="Images/info-circle.png" alt="Information Icon">
</a>
</p>
<div class="attributeButtons">
<div class="buttonPadding">
<asp:Button ID="OSTAQ3Button1asp" CssClass="btn btn-primary unique" style="width:150px; height:50px" ForeColor="DimGray" BackColor="Transparent" BorderColor="DimGray" runat="server" Text="Pass" OnClick="OSTAQ3Button1Click" TabIndex="23"/>
</div>
<div class="buttonPadding">
<asp:Button ID="OSTAQ3Button2asp" CssClass="btn btn-primary unique" style="width:150px; height:50px" ForeColor="DimGray" BackColor="Transparent" BorderColor="DimGray" runat="server" Text="Fail" OnClick="OSTAQ3Button2Click" TabIndex="24"/>
</div>
<div class="buttonPadding">
<asp:Button ID="OSTAQ3Button3asp" CssClass="btn btn-primary unique" style="width:150px; height:50px" ForeColor="DimGray" BackColor="Transparent" BorderColor="DimGray" runat="server" Text="N/A" OnClick="OSTAQ3Button3Click" TabIndex="25"/>
</div>
<div class="commentContainer">
<asp:TextBox ID="OSTAQ3CommentBoxasp" visible="false" runat="server" TextMode="MultiLine" CssClass="commentBoxStyle" placeholder="Additional Comments" MaxLength="254" TabIndex="26"/>
</div>
</div>
<h6>Escrow transactions were conducted in compliance with the purchase agreement and/or escrow instructions and lender’s
instructions. </h6>
</div>
<br>
<hr>
<!-- Question 4 -->
<div class="question">
<p><b>
4).
</b> Date Verified
<a class="d-inline-block" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-custom-class="custom-tooltip" data-bs-title="The print date noted by the system on the principal’s Closing Statement was the same or prior to the signature date of the buyer/seller.">
<img src="Images/info-circle.png" alt="Information Icon">
</a>
</p>
<div class="attributeButtons">
<div class="buttonPadding">
<asp:Button ID="OSTAQ4Button1asp" CssClass="btn btn-primary unique" style="width:150px; height:50px" ForeColor="DimGray" BackColor="Transparent" BorderColor="DimGray" runat="server" Text="Pass" OnClick="OSTAQ4Button1Click" TabIndex="27"/>
</div>
<div class="buttonPadding">
<asp:Button ID="OSTAQ4Button2asp" CssClass="btn btn-primary unique" style="width:150px; height:50px" ForeColor="DimGray" BackColor="Transparent" BorderColor="DimGray" runat="server" Text="Fail" OnClick="OSTAQ4Button2Click" TabIndex="28"/>
</div>
<div class="buttonPadding">
<asp:Button ID="OSTAQ4Button3asp" CssClass="btn btn-primary unique" style="width:150px; height:50px" ForeColor="DimGray" BackColor="Transparent" BorderColor="DimGray" runat="server" Text="N/A" OnClick="OSTAQ4Button3Click" TabIndex="29"/>
</div>
<div class="commentContainer">
<asp:TextBox ID="OSTAQ4CommentBoxasp" visible="false" runat="server" TextMode="MultiLine" CssClass="commentBoxStyle" placeholder="Additional Comments" MaxLength="254" TabIndex="30"/>
</div>
</div>
<h6>The print date noted by the system on the principal’s Closing Statement was the same or prior to the signature date of the
buyer/seller. </h6>
</div>
<br>
<hr>
<!-- Question 5 -->
<div class="question">
<p><b>
5).
</b> Closing Statement signed by all parties
<a class="d-inline-block" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-custom-class="custom-tooltip" data-bs-title="The Closing Statement was signed by all parties to the transaction. (Even if the lender prepares the CD, we require the borrower to sign our Closing Statement as acceptance and approval of the c
harges.)">
<img src="Images/info-circle.png" alt="Information Icon">
</a>
</p>
<div class="attributeButtons">
<div class="buttonPadding">
<asp:Button ID="OSTAQ5Button1asp" CssClass="btn btn-primary unique" style="width:150px; height:50px" ForeColor="DimGray" BackColor="Transparent" BorderColor="DimGray" runat="server" Text="Pass" OnClick="OSTAQ5Button1Click" TabIndex="31"/>
</div>
<div class="buttonPadding">
<asp:Button ID="OSTAQ5Button2asp" CssClass="btn btn-primary unique" style="width:150px; height:50px" ForeColor="DimGray" BackColor="Transparent" BorderColor="DimGray" runat="server" Text="Fail" OnClick="OSTAQ5Button2Click" TabIndex="32"/>
</div>
<div class="buttonPadding">
<asp:Button ID="OSTAQ5Button3asp" CssClass="btn btn-primary unique" style="width:150px; height:50px" ForeColor="DimGray" BackColor="Transparent" BorderColor="DimGray" runat="server" Text="N/A" OnClick="OSTAQ5Button3Click" TabIndex="33"/>
</div>
<div class="commentContainer">
<asp:TextBox ID="OSTAQ5CommentBoxasp" visible="false" runat="server" TextMode="MultiLine" CssClass="commentBoxStyle" placeholder="Additional Comments" MaxLength="254" TabIndex="34"/>
</div>
</div>
<h6>The Closing Statement was signed by all parties to the transaction. </h6>
</div>
<br>
<hr>
OSTA.css
/* Body */
body {
font-family: 'Segoe UI';
background-color: #f7f3eb !important;
}
.navbar {
background-color: #ffffff !important;
}
/* Batch Information */
.batchFields {
padding-left: 1%;
padding-right: 1%;
padding-top: 2%;
padding-bottom: 1%;
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 10px;
justify-items: center;
align-items: center;
}
.batchFields p {
text-align: center;
font-size: large;
}
.batchInfoHeader {
justify-content: center;
align-items: center;
}
.batchInfoHeader p {
text-align: center;
font-size: x-large;
padding: 5%;
}
.batchFields button {
margin-top: 2.5em;
}
/* File Information */
.textFields {
padding: 1%;
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 10px;
justify-items: center;
align-items: center;
position: -webkit-sticky;
position: sticky;
top: 0;
background-color: #f7f3eb !important;
z-index: 1000;
}
.textFields p {
text-align: center;
font-size: large;
}
.fileInfoHeader {
justify-content: center;
align-items: center;
}
.fileInfoHeader p {
text-align: center;
font-size: x-large;
padding: 10%;
}
.bottom-line {
border-bottom: 1px solid lightgrey;
}
/* Attributes */
.attributes {
position: relative;
padding-top: 2%;
padding-left: 8%;
padding-right: 8%;
}
/* Attributes - Questions */
.tooltip-inner {
max-width: 500px !important;
}
.custom-tooltip .tooltip-inner {
background-color: white;
color: black;
font-size: 1.5vh;
border: 1px solid black;
}
.custom-tooltip .arrow::before {
border-right-color: white;
}
.d-inline-block {
padding-right: 0.75%;
}
.question p {
font-size: x-large;
margin: auto;
}
/* Attributes - Questions Buttons */
.btn.btn-primary unique {
width: 100%;
height: 100%;
font-size: 16px !important; /* Makes the text a little bigger */
transition: all 0.3s ease; /* Smooth transition for hover effect */
}
.btn.btn-primary.unique:hover {
color: white !important; /* Inverted color */
background-color: DimGray !important; /* Inverted background color */
border-color: DimGray !important; /* Ensure border color is consistent */
}
.attributeButtons {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 10px;
justify-items: center;
align-items: center;
padding-left: 2%;
padding-right: 2%;
height: 100vh;
overflow: auto;
}
.attributes hr {
color: #636363;
}
.redHR hr {
color: #ff3333;
}
.redHR h2 {
color: #ff3333;
text-align: center;
}
.greenHR hr {
color: #49ab51;
}
.greenHR h2 {
color: #49ab51;
text-align: center;
}
.buttonPadding {
padding: 5%;
}
.buttonPadding button {
padding: 0.5em 1em; /* Relative padding */
font-size: large; /* Relative font size */
width: 8rem; /* Relative width */
}
/* Attributes - Questions Comment Box */
mentContainer {
grid-column-start: 4;
grid-column-end: 7;
/*grid-column-end: 6;*/
}
mentBoxStyle {
border-radius: 5px;
width: 25vw;
height: 8vh;
display: inline-block;
}
/*
mentHeaderStyle {
display: none;
}
*/
/* Bottom Comment Box */
mentOverallHeaderStyle {
font-size: x-large;
}
mentOverallBoxStyle {
padding-left: 8%;
padding-right: 8%;
/*display: grid;
grid-template-columns: repeat(4, 1fr);
*/
}
mentOverallBoxStyle textarea {
width: 50%;
/*
grid-column-start: 1;
grid-column-end: 3;
*/
border-radius: 5px;
}
.submitButton {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
padding-top: 2%;
padding-bottom: 2%;
justify-items: center;
}
OSTA.aspx.cs (when we do not have control.Focus(), when a question is selected or page is refreshed, the scroll position goes to the top of the page. control.Focus() brings the scroll position to the bottom, as seen in the gif before. We want it to MAINTAIN scroll posiition)
///-------------------[ PAGE LOAD ]-------------------
protected void Page_Load(object sender, EventArgs e){
this.Page.MaintainScrollPositionOnPostBack = true;
if(Page.IsPostBack){
//is there a way to determine vertical scrolling location?
questionStatusText.Text = questionsUnanswered.ToString();
string controlName = Page.Request.Params["__EVENTTARGET"];
System.Web.UI.Control control = GetPostBackControl(this.Page);
control.Focus();
// 'center' can be changed to 'start' for top positioning or 'end' for bottom positioning
ScriptManager.RegisterStartupScript(this, this.GetType(), "scrollToControl", "scrollToControl('" + control.ClientID + "', 'center');", true);
//TRY TO MAKE THIS MORE EFFICIENT - sender?
selectedBatchNumber = OSTABatchNumberDropdownasp.Items[OSTABatchNumberDropdownasp.SelectedIndex].Text;
OSTABatchNumberDropdownasp.SelectedValue = selectedBatchNumber;
OSTAFileNumberDropdownasp.DataSource = ReadSQL("SELECT DISTINCT FileNumber FROM [SADET].[dbo].[OSTA] WHERE [Hidden] != 1 AND [BatchNumber] = '" + selectedBatchNumber + "'",null);
OSTAFileNumberDropdownasp.DataTextField = "FileNumber";
OSTAFileNumberDropdownasp.DataBind();
}else{
//ConnectAD();
OSTABatchNumberDropdownasp.DataSource = ReadSQL("SELECT DISTINCT BatchNumber FROM [SADET].[dbo].[OSTA] WHERE [Hidden] != 1 UNION SELECT DISTINCT BatchNumber FROM [SADET].[dbo].[BatchFiles]",null);
OSTABatchNumberDropdownasp.DataTextField = "BatchNumber";
OSTABatchNumberDropdownasp.DataBind();
OSTAFileNumberDropdownasp.DataSource = ReadSQL("SELECT DISTINCT FileNumber FROM [SADET].[dbo].[OSTA] WHERE [Hidden] != 1 UNION SELECT DISTINCT FileNumber FROM [SADET].[dbo].[BatchFiles]",null);
OSTAFileNumberDropdownasp.DataTextField = "FileNumber";
OSTAFileNumberDropdownasp.DataBind();
}
}
///-----------------[ END PAGE LOAD ]-----------------
OSTA.aspx (Javascript inserted)
<script>
function scrollToControl(controlId, position) {
var control = document.getElementById(controlId);
if (control) {
control.scrollIntoView({ behavior: 'smooth', block: position });
}
}
// Tooltip functionality
const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl));
// Dropdown Functionality
const dropdown = document.getElementById('transactionDropdown');
const textarea = document.getElementById('transactionType');
dropdown.addEventListener('change', function () {
textarea.value = dropdown.value;
});
// "Back to Top Button"
let mybutton = document.getElementById("topButton");
function topFunction() {
var element = document.querySelector('[tabindex="1"]');
if (element) {
element.focus();
}
}
</script>
Sitemaster
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="SADET_2025.SiteMaster" %>
<!DOCTYPE html>
<html>
<head runat="server">
<title></title>
<link href="Content/Site.css" rel="stylesheet" />
<link rel="stylesheet" href="Content/all.min.css">
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> -->
</head>
<body>
<form id="form1" runat="server">
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-dark bg-dark" style="background-color: #ffffff !important;">
<h1><img src="Images/FNF_logo_BIG.png" style="height:70px; width:70px"/></h1>
<h1><img src="Images/DSG_LOGO.png"/></h1>
</nav>
<div class="wrapper">
<div class="sidebar">
<br />
<h1><a href="Home.aspx"><img src="Images/SADETs.png" alt="SADET"/></a></h1>
<nav>
<ul>
<li><a href="RONSA.aspx"><img src="Images/RONSA.png" alt="RONSA" /></a></li>
<li><a href="COSTA.aspx"><img src="Images/COSTA.png" alt="COSTA" /></a></li>
<li><a href="OSTA.aspx"><img src="Images/OSTA.png" alt="OSTA" /></a></li>
<!--<li><a href="About.aspx"><img src="Images/PlaceHolder.png" alt="OSTA" /></a></li>-->
<li><a href="Contact.aspx"><img src="Images/envelope.png" alt="Support" /></a></li>
</ul>
</nav>
</div>
<div class="content">
<asp:ContentPlaceHolder ID="MainContent" runat="server" />
</div>
</div>
</form>
</body>
</html>
Sitemaster.css
/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content {
margin-top: 15px;
padding-left: 15px;
padding-right: 15px;
}
/* Set widths on the form inputs since otherwise they're 100% wide */
input,
select,
textarea {
max-width: 280px;
}
/* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) {
.body-content {
padding: 0;
}
}
html, body {
height: 100%;
margin: 0;
font-family:'Segoe UI';
}
.navbar {
padding: 0;
background-color: #ffffff !important;
height: 80px;
width: 100%;
align-items: center;
flex-direction: row;
display: flex;
position: relative; /* Ensure this is set */
}
h1 {
margin: 0;
}
h1 img {
width: 200px;
height: 70px;
}
.wrapper {
display: flex;
height: calc(100vh - 80px); /* Adjust this based on the height of your navbar */
position: relative;
}
.sidebar {
width: 100px;
background-color: #383838;
padding: 15px;
box-sizing: border-box;
font-family: 'Segoe UI';
display: flex;
flex-direction: column;
align-items: center;
position: sticky;
top: 0;
}
.sidebar h1 {
margin: 0;
padding: 10px 0;
font-size: 24px;
}
.sidebar h1 img {
width: 250px;
height: 30px;
}
.sidebar h1 a {
text-decoration: none;
color: #f31414;
}
.sidebar h1 a img {
width: 90px;
height: 90px;
}
.sidebar nav ul {
list-style-type: none;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
}
.sidebar nav ul li {
margin: 10px 0;
}
.sidebar nav ul li img {
width: 80px;
height: 50px;
}
.sidebar nav ul li a {
text-decoration: none;
color: #ffffff;
}
.content {
flex-grow: 1;
box-sizing: border-box;
overflow-y: auto;
position: relative; /* testing - Alexis 2/14/25 */
}
1 Answer
Reset to default 0It not clear why you are re-binding the dropdowns on each and every post-back? Why are you doing this?
You should only re-bind the dropdowns on the first real page load
eg:
if (!IsPostBack)
{
// code here to load dropdowns,
// code here to load other controls, and data.
}
So, re-binding data will OFTEN cause you to lose your position on the page - so, don't do that. You are unnecessary hitting the database each time. In fact, if a user selects a DDL, and you re-bind it in page load? Then you lost that selection!
So, re-binding overwrites any user selecting or typing into any such data bound controls.
Keep in mind that page load fires each and every time. So, if a user selects a DDL, then re-binding will overwrite the user's selection. So, I suggest removing the DDL' re-load and re-binding code that fires on post back. Those DDL's should only load on first page load - not each and every time, else the user will NEVER be able to select a DDL's value without losing the value on post back (so, move that code to ONLY to run in the !IsPostBack code part of page load).
Next up:
You have 2 sets of code to scroll the browser. You using the built in MaintainScrollPositionOnPostBack, and then you ALSO have some JavaScript code attempting to do the same thing!!
As such, both of those routines are going to step all over each other.
And, if you going to register a script to run?
Then you need to let the page have time to load and finish rendering BEFORE you attempt to run that custom scroll code.
Worse yet, in your case you have two active approaches attempting to scroll the browser - they are going to fight each other.
And, while registering a script to run some client code is fine in 99% of cases? Your case is an exception, since client side script is "sensitive" to the UI display not yet having completed. So, when you doing things like say popping up a dialog etc.? (or wanting the screen to scroll)? The you need to let that page render, let the scrolling finish (the built in browser scrolling), AND THEN run your injected script code.
Then in most cases, you have to introduce a delay to the client side script you injected to run, and allow the browser and the system code injected code to finish, and rendering of the page - (so the browser knows how big and how much space the markup used!).
As I pointed out, in most cases, rebinding your data controls will not only overwrite the user's choice, but in the case of a grid, or repeater? Then a re-bind will lose your scroll position, since the page has all new data, not persisted "viewstate" data.
I would fix you re-binding issues (that you re-binding data over and over on each page post-back). You in fact REALLY CAN not build a working page with user input if you re-binding those controls each time - as pointed out, they will overwrite user's choices.
And, for your custom scroll routine? You need to introduce a delay so the UI can update the browser, and AFTER the UI thread on the browser has done all it's work, then run your scroller.
Hence, like this:
function scrollToControl(controlId, position) {
var control = document.getElementById(controlId);
if (control) {
setTimeout(function () {
control.scrollIntoView({ behavior: 'smooth', block: position });
}, 250)
}
}
So, without your data, all we can do here is a read boatloads of code, and make "general" suggestions.
So, try the above 3 suggestions.
They are:
Use built in scroller setting - not custom scroller code.
Fix the re-binding of controls - that often loses both the user's choice and scroll position.
Use your custom scrolling code - not the built in one.
Introduce a delay in your custom scroller code if called via script injection.
If you want additional help on this issue?
Then you need to post a absolute "minimal" working and re-producible example of your issue.
So, without a re-producible code example, then all we have is a whole bunch of code to read, and we really can't try your code, can we? As developers, how we fix issues is no different then how you approach such issues. However, you can try things, and we can't.
So, I would consider creating a blank page, and introduce the minimal amounts of markup, and even remove the DLL's and binding code. Does the scrolling issue still exist? Can you share that working page with everything removed except markup that shows your issue?
Edit: Using existing posted markup:
Note that with the posted markup, and this on page load:
protected void Page_Load(object sender, EventArgs e)
{
Page.MaintainScrollPositionOnPostBack=true;
}
The page does scroll back to the browser position (and note that I did NOT include any of the client side script. We see this:
So, currently, even without any client side js code, and using MaintainScrollPositionOnPostBack, then after clicking a button, the page DOES scroll back to the scroll position where the browser was clicked.
Also, looking at your markup?
Why (and how) did the "id" of a button name, and the name of the event code stub get miss-matched up? You don't as a general rule "type in by hand" the code behind stub name, but are to let VS generate that code stub for you.
Hence, say like this:
In other words, who and why are the event sub names being typed in by hand? It's rather clear the developers here are not using VS to help them code. Remember, when you type in OnClick=, then hit the space bar, and you are given a prompt to create the code behind. You should adopt this approach, as then you reduce errors, and the OnClick event name will match the "id" of the given control.
Regardless:
The scrolling with the post markup works.
Not clear why event stub names are being "hand coded" and don't match the control id (perhaps a make work program to rack up more billable hours??)
As pointed out, if you re-bind the drop downs each and every time as you are in page load, then the user selected values will be lost to code behind.
So, with your given posted markup, the browser does scroll to the position of a button click. As I pointed out, then we need more information here, and as I noted, you need to pay more attention to data binding in the page load event. My suspect here is your re-binding code firing each time the page is posted back.
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745086478a4610435.html
scrollToControlin the browser Console. Pass the required parameters and see if it works or if you're getting an error. – Daniel Manta Commented Mar 4 at 0:30