Concerns with textbox placement while scrolling with an absolute position style

I have an ASP:textbox on a page with various controls and divs, where I am setting the style to position:absolute on the "onkeyup" event. The height of the textbox increases dynamically based on the characters entered, but the issue is that the textbox always stays in a fixed position when the user scrolls up or down the page. On the "onblur" event, I change the style back to its default, but it still moves with the scroll when the focus is on the textbox.


<asp:TextBox ID="txtComment1" runat="server" Height="13px" Width="99%" MaxLength="40" TextMode="MultiLine"   
     onkeyup="SetHeight(this)" onblur="Blur(this)"></asp:TextBox>

<script type="text/javascript">
    
//SetHeight function changes the style to position:"absolute"

function SetHeight(textbox) {
    textbox.style.height = "14px";
    textbox.style.position = "absolute";
    textbox.style.width = "49%";
}

//Blur function resets the style to default

function Blur(textarea) {
    textarea.style.height = "14px";
    textarea.style.position = "";
    textarea.style.width = "99%";
}

</script>

P.S. : I have tried HoverMenuExtender but still facing the same issue

Answer №1

To keep an HTML element fixed on the page while scrolling, you can use the position: fixed property. This is commonly seen in sticky headers and footers on websites such as LinkedIn and Facebook.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How to fix the issue of not being able to pass arguments to the mutate function in react-query when using typescript

Currently, I am exploring the use of react-query and axios to make a post request to the backend in order to register a user. However, I am encountering an error when attempting to trigger the mutation with arguments by clicking on the button. import React ...

Deactivate the dependent picklist functionality on a Visualforce page

After successfully disabling all input and select elements on my page using the following code: $('input').prop('disabled',true); $('select').prop('disabled',true); I encountered an issue with two picklist fields i ...

Underline Rows in CSS

When designing my website, I decided to organize the content into rows using CSS instead of tables. To create a line separating each row, I used height:px; for each row manually. However, this method resulted in the line jumping around inconsistently acr ...

I am interested in utilizing Maven and paulhammant (Selenium_java) to input text into a textefield

When attempting to write in the text field using selenium, I encountered an error stating "unexpected identifier". Any assistance with this issue would be appreciated. See image for more details ...

Incorporating a hyperlink into a ReactJS object's value

I have a ReactJs app with an object containing English translations. Is it possible to make the word "here" in the paragraph a clickable link by adding the URL of description.href? I tried adding it as HTML, but it rendered as text. const EnMessages = { ...

Having trouble retrieving the value of a custom directive attribute

My custom directive, named "mycomponent", has the following configuration: restrict: 'AE', templateUrl: 'template.html', scope:{ sTransactionType: '=transactionType', sStorageVariable: '=storageVariable&apos ...

What is the best way to implement my Vanilla JS Array manipulation technique in a ReactJS environment?

https://i.sstatic.net/ZRGsS.jpgMy REST API development is in its final stages, and I'm currently facing a challenge with converting an array received from the backend into either a Nested Object of Objects or an array of objects. This conversion would ...

Automate the processing of string input into an input field

I realize that this question has been raised numerous times before. However, the previously suggested solutions are no longer effective. I am attempting to automate a form by simulating key presses. For example, when I try: document.getElementById(" ...

In JavaScript, I would like to be able to input an end date and have the program calculate and display the number of days remaining until the deadline

I'm working on a school project that involves JavaScript code. I'm struggling with converting a date prompt from string to number format. As a beginner in JavaScript, I could really use some guidance. <script> enddate = prompt('Wh ...

What is the best way to create multi-step selectors on an HTML webpage?

I am struggling with creating an HTML contact form that involves element dependencies. The schema includes various selectors and inputs that depend on previous selections. How can I implement this logic in HTML and JavaScript (jQuery)? I need to generate ...

Guide to adding a personalized HTTP header to ajax request using JavaScript or jQuery

Is there a way to create a custom HTTP header using JavaScript or jQuery? I've tried the code below but it's giving me an error of 405 Method not Allowed. I'm using the POST method, but in the request it shows as OPTION. The status code is ...

How do I ensure that my absolutely positioned element is centered in this specific scenario?

I've been working on centering an element within its parent container, and I'm having trouble ensuring it remains centered responsively. Here's what I have so far: HTML <div class="example"> <span class="element1">Element ...

What is the best way to add two hyperlinks within a single tab of a Bootstrap navigation menu?

I attempted to place two links in one tab, but I was unsuccessful. Here is my navbar code: <!DOCTYPE html> <html lang="eng"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scal ...

Creating a p5.js circle on top of an HTML image: A step-by-step guide

Currently, I am integrating an image into my web application using standard JavaScript and HTML. The image represents a basic map, and my objective is to utilize p5.js to draw on it. <div id="map"> <img src="Assets/MENA.jpg" ...

Properly setting class and exporting in javascript and Node.js: Best practices

I am using node.js and I have loaded a js file in ejs Once main.js is loaded, the script will start functioning. In the meantime, <script type="text/javascript" src=../javascripts/functions.js></script> <script type=" ...

Can anyone point me to the Angular-2-Release that is located on the https://code.angularjs.org

Word has it that angular 2 has finally made its debut. Personally, I'm not a big fan of relying on npm and bower to automatically load my components. I prefer to keep my dependencies minimal and fully understand each one. Additionally, I like to utili ...

How to use jQuery to delete the final table in an entire HTML document

This situation is really frustrating: When I make a jQuery Ajax call, the success callback returns an entire HTML page. The returned page looks like this: <html> <head> <title>Title</title> <body> <table></table> ...

Transform a previously escaped backslash into an escaping backslash

I am facing a challenge where the backslashes in my server-generated string are escaped, which is causing some issues for me. Here is an example of the string I have: const s = 'text\\n' Due to the escaped backslashes, the intended fu ...

Changing the color of options in a list when clicked: a step-by-step guide

Here is the HTML code I have: <li onclick="switchColors()"> <a class="x" href="Faculty.php">Faculty</a> </li> <li onclick="switchColors()"> <a class="x" href="Contact.php">Contact</a> </li> And here ...

Adjustable CSS display: an adaptable left column paired with a changeable fixed right column

I am looking to align the content of a div element in a single row while dealing with an unknown width of the ul element due to varying child li elements. The h2 will always take up the remaining space, and each li element has a width of 20px. The desired ...