Issue with display of absolute/relative positioned element in IE8

Within a list element (a div) styled with inline-block, there is a ul positioned relatively that is initially hidden. To make the div absolute, I added a class but encountered issues specifically in IE8/9 where clicking on the list does not reveal it as expected.

I searched for solutions by googling "ie absolute positioned element disappears" but none of them worked for me.

You can conduct tests on this issue by visiting:

To test, you can save the page (Ctrl+S) and edit the script accordingly.

The positioning conversion process starts at line 956 in jAutochecklist.js file. The element to be moved is referred to as wrapper.

if (data.settings.absolutePosition){
            var offset = wrapper.offset();
            var dummy = $('<div></div>').attr('class', pluginName + '_dummy ' + pluginName + '_wrapper').width(wrapper.width()).height(wrapper.height());
            obj.after(dummy);
            //move the list so the absolute position can become effective
            wrapper.addClass(pluginName + '_absolute').appendTo('body').css({
                top: offset.top + 3,
                left: offset.left
            });
            elements.input.focus();
        }

In addition, when closing the popup while the list is still open/focused in IE, the list remains visible on the screen.

For a visual demonstration, check out this fiddle: http://jsbin.com/anokod/1/edit

Answer №1

The issue was resolved by eliminating the css style filter from the wrapper with absolute position.

In Internet Explorer, having two properties

filter:progid:DXImageTransform.Microsoft.gradient...
applied to the same element with absolute positioning triggers this glitch.

Answer №2

Eliminate the specified height of 20 pixels in the style for jAutochecklist_wrapper

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

Encountering a Javascript Error when trying to begin

As a beginner in Javascript, I am venturing into designing a simple website that incorporates Javascript. Currently, my focus is on building a calculator. However, upon loading my website, nothing seems to initiate and there are no error messages displayed ...

Implement custom material-ui styles exclusively for mobile displays

When working with Material-UI in react, I am wondering if there is a way to apply theme provider overrides only in mobile view. Specifically, I am using the <Card> component and would like to remove the boxShadow of the card when it's displayed ...

Positioning Google Chart in HTML

I'm attempting to arrange three distinct Google pie charts in a horizontal layout. At present, I have applied inline CSS for formatting purposes. Oddly enough, the third chart always ends up on a separate line. Could anyone kindly point out my error? ...

Expanding Div Heights that Adjust to the Browser's Width

Looking to set up a responsive height for a div, almost there but facing some distortion when resizing the browser. Here is the fiddle file for reference: https://jsfiddle.net/td5n8ky9/10/ The issue lies in the bottom 2 divs - aiming for a grey bar the wi ...

Has the user successfully authenticated with Google?

Possible Repetition: How to verify if a user is logged into their Google account using API? I'm working on a website that displays a Google Calendar. My query is: Can I determine whether a user is currently logged into a Google Account? If it&ap ...

Having trouble deciphering the JSON data structure in JavaScript

How can values be passed back to a form that was submitted to the server using Ajax? In this view (shown below), a simple data structure is returned for testing purposes: def detail(request, widget_id): widget = get_object_or_404(Widget, pk=widget_i ...

Navigating through an array in jquery that has been populated by a php script

I am trying to access an array in jQuery that is returned by a PHP script through an Ajax call This is the Ajax call I am making to get the result from the PHP script: $.ajax({ url: "http://localhost/WCPM/index.php/demand/check_demand_ ...

Using Foreach to reference data as "this"

I am attempting to iterate through this information in order to assign a value to each. const keys = Object.keys(response.data) keys.forEach((index, element) => { // let query = "this."+element this[element] = response.data[element] }); The de ...

Position the icon to the left and right of the toggle-switch checkbox

I am trying to position my two icons on the left and right of my toggle switch, but I am facing difficulties in making it work. <div class="d-flex"> <div class="form-check form-switch"> <label class="form ...

Press the key to navigate to a different page

I have an input field for a search box. I want it so that when I enter my search query and press enter, the page navigates to another page with the value of the input included in the URL as a query string. How can I achieve this functionality? Thank you ...

What separates the onclick functionality of buttons from that of divs?

Initially, this issue may be specific to Firefox, though it is uncertain. Let's delve into some code: <!doctype html> <html> <head> <meta charset="UTF-8> <title>Text Editor</title> <!-- Custom CSS -- ...

What is the best way to retrieve information in Next.js when there are changes made to the data, whether it be new

Could you share a solution for fetching data in Next.js when data is added, deleted, or edited? I tried using useEffect with state to trigger the function but it only works when data is added. It doesn't work for edit or delete operations. I have mult ...

IE Form SubmissionThe process of submitting a form in

My attempt to prevent form submission in IE 8 using jQuery 1.8.2 by using e.preventDefault(); is not working as expected. $(document).ready(function () { $("form").submit(function (e) { e.preventDefault(); $.ajax({ .... ...

ajax used to retrieve xml data and process it

I've been working on retrieving information from an API (specifically BBB) and the response I'm getting looks like this: <?xml version="1.0"?> <response> <returncode>SUCCESS</returncode> <meetingID>ldapreade ...

What could be the reason for the handleOpen and handleClose functions not functioning as expected?

I am facing an issue with my React component, FlightAuto, which contains a dropdown menu. The functionality I'm trying to achieve is for the dropdown menu to open when the user focuses on an input field and close when they click outside the menu. Howe ...

Implementing real-time flash notifications after a successful AJAX update in Ruby on Rails

When it comes to displaying a flash success notification after a successful AJAX update, I typically use the following method in my action: def something redirect_to "that_controller_path", :notice => "Success" end However, I am ...

Uploading Images with Ajax

Is it still the same action if I replace Code 1 with Code 2? Code 1 $(document).ready(function(){ var thumb = $('img#thumb'); new AjaxUpload('imageUpload', { action: $('form#newHotnessForm').attr('actio ...

Although req.user is undefined, the login process is functioning properly

Solution Quest This inquiry has been posed countless times, yet none of the responses have resolved my issue. In all my app's routes, the req.user call consistently returns undefined, regardless of which route I access. Interestingly, my login funct ...

Having trouble with input event listeners in JavaScript?

I've been attempting to trigger the keyup event using EventListener for an input tag, but it doesn't seem to be working and I'm unsure why. Here is the code I have: document.getElementById("ajax").addEventListener("keyup", function() { ...

Firefox unable to play video recorded in Chrome

A video captured using the react plugin called, rico345100/react-multimedia-capture, was successfully recorded and uploaded to a server via Chrome. However, when attempting to play the same video in Firefox, it does not function properly. Interestingly, vi ...