The performance of ASP.net text-boxes is inconsistent

After days of searching for a solution, I am still unable to resolve my issue. My website features a simple web-form with text-boxes that are supposed to appear when the user selects the "custom search" option. While testing locally, everything works fine. However, once I publish it to our web server, the text-boxes stop functioning properly. The hover cursor on the web-server changes unexpectedly from the "text" cursor to the "pointer" cursor. If the cursor is positioned at the edge of the text-box, it displays the "text" cursor allowing me to click and type. But as soon as the cursor moves inside the text-box without touching the edges, it switches to the pointer cursor and typing becomes impossible no matter how hard I try to activate the text-box. Interestingly, if I first make a selection in the drop-down list and then click tab, focus shifts to the text-box.

Below is the mark-up code for the text-boxes:

<asp:Label ID="lbl_Fname" Text="First Name" CssClass="FN-lbl" runat="server" />
<asp:DropDownList ID="ddl_Fname" CssClass="FN-drop" Width="12%" runat="server">
    <asp:ListItem Value="0">-- Select One --</asp:ListItem>
    <asp:ListItem Value="=">equals</asp:ListItem>
    <asp:ListItem Value="<>">does not equal</asp:ListItem>
    <asp:ListItem Value="&gt;">greater than</asp:ListItem>
    <asp:ListItem Value="&gt=">greater than or equal to</asp:ListItem>
    <asp:ListItem Value="&lt;">less than</asp:ListItem>
    <asp:ListItem Value="&lt;=">less than or equal to</asp:ListItem>
    <asp:ListItem Value="like">contains</asp:ListItem>
    <asp:ListItem Value="not like">doesn&#39;t contain</asp:ListItem>
</asp:DropDownList>&nbsp;&nbsp;
<asp:TextBox ID="txt_Fname" CssClass="FN-txt" Width="16%" runat="server"></asp:TextBox>

The following CSS entry was used (please note that the comment is only included in this post, not in actual CSS):

.FN-txt
        {
            position: absolute; 
            left: 320px; 
            top: 120px; 
            width: 100px; 
            height: 20px; 
            cursor: text; /*an attempt to get the cursor to behave, it didn't help*/
        }

I have exhaustively researched all related posts on stack-overflow, code project, and spent numerous hours refining my search terms on Google (or blackle.com). Unfortunately, due to being a new member, I am unable to upload an image of the GUI.

----------------- Follow up notes ------------------------ The following code was added to the markup:

OnSelectedIndexChanged="ddl_Email_SelectedIndexChanged" AutoPostBack="true"

Below is the code behind:

protected void ddl_Fname_SelectedIndexChanged(object sender, EventArgs e)
{
    if (ddl_Fname.SelectedValue != "0")
    {
        txt_Fname.Focus();
    }
}

While attempting mtzaldo's solution, adding it solely to Fname seemed to partially fix the issue. Upon further testing, a combination of my changes and his suggestion appeared to solve the problem. I removed his z-index from the CSS and retested, confirming that it was still working.

Answer №1

When working with the CSS class, consider adding a high z-index value such as z-index:999; This may resolve the issue of an element overlapping your textbox with a transparent background.

Additionally, have you tried testing the deployed version in different browsers such as IE and the local version in Firefox?

Answer №2

It seems that the problem was resolved by including "cursor: text" in the CSS, and after clearing the cache, the issue was finally visible.

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

Press on the menu <li> item to create additional submenus

A group of friends is facing a challenge. They want to create a dropdown sub-menu that appears directly below the selected item when clicking on a link from a menu. So far, they have been able to use ajax to send requests and generate a sub-menu. However, ...

What is the functionality of 'min-height: 100vh' when child elements stack due to a small width?

In a parent element, I have two child elements: <div id="registration"> <div id="left-panel"></div> <div id="right-panel"></div> </div> The styling is as follows: #registration{ @include l { flex-dire ...

Using CDN to bring in Bootstrap, without triggering animations

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>E ...

Best practices for including jQuery in ASP.NET (or any other external JavaScript libraries)

Can you explain the distinctions among these three code samples below? Is there a preferred method over the others, and if so, why? 1.Page.ClientScript.RegisterClientScriptInclude(typeof(demo), "jQuery", Re ...

Incorporating a Registration Popup Form in ASP.NET

Looking to implement an Ajax popup for a registration form on my ASP.NET page. What is the recommended approach to achieve this? How can I ensure that my database is updated without needing to refresh the page? ...

One way to target a span inside a label element when a checkbox is checked using React Material UI createStyles is by using CSS selectors in combination with

I need help targeting the span element within a checkbox label in order to change its background color when the checkbox is checked. <div className={classes.container}> <input type="checkbox" id="checkboxid" /> <lab ...

Trouble with achieving equal height columns in nested flexbox layout on Google Chrome

I am looking to evenly space several sidebar blocks throughout a lengthy post. To achieve this, I have utilized Flexbox within the sidebar for handling the even distribution of the blocks and it has been working flawlessly. Check out Code Pen: http://cod ...

Fade in and out of div elements upon clicking on an # anchor

I have been attempting to create a function where different divs fade in and out when clicking on an image with an <a href>. Unfortunately, I have not been successful in getting it to work despite several attempts. Here is the code that I am using: ...

Looking for a jQuery plugin that helps with form alignment?

In a blog post comment, I came across an interesting jQuery form alignment plugin: jQuery.fn.autoWidth = function(options) { var settings = { limitWidth : false } if(options) { jQuery.extend(settings, options); }; ...

CSS for Centering Text and ImageAchieving the perfect alignment

I have a footer positioned at the bottom of my webpage containing some text along with a few PNG images. I am attempting to center everything within the footer. I tried using margin: 0 auto, but it didn't work due to the footer not being a block elem ...

Click to position custom text on image

Is there a way to adjust the position of text on an image after it has been clicked? I have included an image below to demonstrate how I would like it to appear: https://i.stack.imgur.com/unmoD.png function revealContent(obj) { var hiddenText = obj. ...

Challenges with jQuery parent method reaching the grandparent element

Hey, I'm a newbie to jQuery and I'm trying to make changes to divs that are two levels above the function trigger: Here's my initial attempt: I try to locate the closest '.node' which is the parent of all other divs and then modif ...

What are the steps to make a dropdown menu using only HTML and CSS?

Can someone please share the most straightforward method for creating a drop-down list using just HTML and CSS? ...

Creating a border with tabs and a triangle using CSS

I'm having trouble getting my HTML/CSS tabs to look like the ones in the image. I've experimented with border-radius but haven't been able to achieve the desired result. Can anyone provide guidance on how to replicate these tabs using only ...

`Implementing a dynamic list with image and button using Bootstrap 5`

I've been exploring ways to create a container with 4 images aligned next to each other, accompanied by a button beneath each image. My goal is for the layout to be responsive, meaning that as the screen size adjusts, the elements inside should also a ...

The Masonry Grid is leaving empty spaces unfilled

I've been experimenting with Sveltekit and SCSS to create a Masonry grid. However, I'm facing an issue where the items in my grid are not filling in the empty space as expected. Instead, they seem to be following the size of the largest image, le ...

Add a hyperlink alongside every row in the table

My table comprises three columns in each row, and I am looking to include a link next to each row. <table> <th> Name: </th> <th> Price: </th> <th> Description </th> ...

Reverse animation transition not activating in CSS

In an attempt to create a side navbar using HTML/CSS, I implemented hover animations where hovering over an icon would cause it to double in size and disperse the rest of the items in the navbar. While I successfully achieved this animation with JavaScript ...

The HTTP referrer value is undefined

My main .NET page is accessible through other .NET pages, and I need to perform certain actions based on the previous page. However, when I attempt to retrieve the last page, it returns null when it shouldn't. Below is the code snippet: Uri ref = R ...

What mechanisms allow for the persistence of a private shared value within an instance of a class across multiple http requests?

We are currently facing an issue with a large asp.net application (written in vb.net) where one of our bespoke classes, stored in the App_Code folder as .vb files, is behaving unpredictably. The private members of this class are persisting between http req ...