The strange behavior of !important, display:none, and .height()

While working with a piece of JS code yesterday, I stumbled upon something peculiar. There was a div element that was initially hidden using display:none, and I was utilizing its height in some JavaScript calculations. Everything was functioning properly until I added a "hidden" class to the element, which had display:none !important.

Unexpectedly, the reported height always became 0. The only alteration made was adding the !important rule to the display property.

After conducting further investigation, I have identified an intriguing finding:

#b { display: none; }            /* height is 36 when reported */ 
#c { display: none !important; } /* height is 0 when reported */

To isolate this issue, I created a simple JSFiddle. This demo uses vanilla JavaScript to retrieve the height, displaying the expected behavior.

It appears that jQuery may inaccurately report the height of invisible DIVs, while the !important declaration functions correctly.

Could this potentially be a bug within jQuery?

javascriptjquerycss

Answer №1

It seems that the issue with jQuery is not actually a bug, but rather a deliberate setting where display is temporarily set to block in order to calculate height. This calculation can be overridden even with the use of !important.

Perhaps a more detailed explanation is needed.

Essentially, obtaining the height of an element from the DOM is impossible if it has no predetermined height. Therefore, when the display property is set to none, the height is non-existent or zero.

By briefly changing the display to block using jQuery, we are able to retrieve the height while also altering the inline style as per jQuery's usual behavior.

<div id="something" style="display:block">/div>

However, if you have set display:none!important in your CSS, this inline style manipulation won't work and the calculated height will remain at zero.

In my personal view, avoiding the use of !important is preferable as it can complicate the readability of your code and presentation. CSS typically offers various methods for overriding styles.

If you still wish to proceed, consider utilizing an inline !important style to override yours, or manually calculating the height using the jQuery show technique for a moment, or even modifying the jQuery function itself to handle the height calculation :)

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

What are the best techniques for styling a SELECT box with HTML and CSS?

I've received a form from a talented designer which includes SELECT inputs designed in a unique manner. Despite my attempts to add paddings, adjust backgrounds, I'm unable to replicate the exact appearance of the select box shown in the image. ...

htmlcssselectinput

A step-by-step guide on implementing lazy loading for a specific div section using either AJAX or Java

I'm facing an issue with a div section that contains numerous tables pulled from my database. The main problem here is that when the page loads, it takes a considerable amount of time to fully load all the content, causing a significant delay. Could ...

javascriptajax

In the setup function, the composition API calculates the return value of the computed property before it is

I am currently working on editing a post using the state manager Vuex in Vue3 with Composition API. Below is the code I have implemented: <template> <div class="container py-5"> <h3 class="mb-5 border-top-0 border-start- ...

javascriptvue.jsvuexvuejs3vue-composition-api

Creating a component that surpasses all others

I have a code snippet that contains styling information for two div elements. How can I ensure that my <div id="home"> appears below my <div id="navigate"? Any suggestions? #home { background-color: black; color: grey; text-align: c ...

htmlcss

Sections stacked with Bootstrap cards are located beneath a different section

Objective The primary aim is to ensure that all sections display correctly on the mobile version of the website. Challenge An obstacle I am currently facing is: Full width (Looking good) https://i.sstatic.net/EDm3N.jpg Mobile version (Issue) There i ...

htmlcssbootstrap-4

I'm looking for the location of the console.log output while running nodejs/npm start. Where

Just started working with react/node and using npm start to launch a server. The server is up and running, displaying my react code as expected. However, I'm facing an issue with debugging - my console.logs are not showing up in the browser console. I ...

javascriptnode.jsreactjsnpmconsole

What options do I have for personalizing event listeners in d3.js?

I am currently working on a simple program that involves using a slider to move a rectangle across a webpage. I have set up the slider like this: <input type = "range" min = "5" max = "500" value = "5" id = "xvalue" > and I am able to access the sl ...

javascripthtmld3.js

What is the best way to execute tests in different environments with Protractor?

Is it possible to execute specifications in various environments? Maybe by adjusting the protractor-config file? Could we do something along the lines of specs: ['../tests/*.js', server1], ['../more_tests/*.js', server2] within the ...

javascriptnode.jsangularjsmocha.jsprotractor

When I use AJAX to load a PHP file, the function's content returns as [object HTMLDivElement]

Hello there, When I use AJAX to load a PHP file, the content of my function returns [object HTMLDivElement], but if I load my function without loading the PHP file, it displays normally. index.php <h1>API Football</h1> <nav> ...

javascriptarraysajaxapi

Issue with setTimeout function when used in conjunction with an ajax call

Currently, I am developing a quiz portal where questions are organized in modules. Each module consists of 5 questions: the first 4 are text-based, and the 5th is an image-based question. Upon registering through register.php, users are directed to index. ...

javascriptajaxsettimeout

Looking for Angular 2 material components for dart with CSS styling? Need help centering a glyph on your page?

HTML: <div class="border"> <glyph class="center" [icon]="'star'" ></glyph> <div class="centerText"> This Is Text that is centered. </div> </div> Css: .centerText{ text-align: center ...

htmlcssangulardartangular2-material

Establishing a secondary Node.js service for local communication with Parse Server

My current project involves using Node.js + Parse Server for an application. I have been utilizing the Parse SDK from the client side, but there are still many changes and refactors that need to be made. One issue I am facing is that certain logic should b ...

javascriptnode.jsparse-platformparse-server

encoding the special character "ü" in json_encode as either 'ü' or '&#

I've developed a function that extracts the title from a given URL and returns it in JSON format. The function is invoked by an AJAX call. Everything works smoothly, but when a title contains characters like ü or any related ones, it returns null. Wh ...

javascriptphpjsonajax

Issue with file upload process in php

I'm currently facing an issue with my file upload function. I've been referring to a website guide for creating the upload form, but made some modifications to it. Here is the code snippet: upload_form.php : //the jquery script is still the sam ...

phpjqueryajax

Accessing the database variable in controller files with Node.js

I am new to node.js and currently using lowdb for my database as I start building my app. In the index.js file, I have set up my Express server along with routes: var express = require('express'); var app = express(); var bodyParser = require(& ...

javascriptnode.js

When CSS animations are used on numerous elements, it can lead to variations in the speed of

I made an animation to move elements from the top to the bottom of a page. I have 4 objects with this animation applied, but for some reason, they are moving at different speeds. It's confusing me. What could be causing this inconsistency? body { ...

htmlcsscss-animations

When transmitting data through ajax, escape characters are seamlessly included

I am looking to pass the SQL condition statement using the id of the link element, which represents the category of the product. This information will be processed by a PHP file and then loaded back into the div with the class load_area. To achieve this, I ...

phpjqueryajax

The v-bind value remains static even as the data in Vue.js updates

I created a function called changeActive that is supposed to update the value of an active boolean. Interestingly, after checking the console log, I observed that the active value changes but for some reason, the updated value is not being passed in the ...

javascriptvue.jsvuejs2vue-componentvue-props

Expanding the input focus to include the icon, allowing it to be clicked

Having trouble with my date picker component (v-date-picker) where I can't seem to get the icon, a Font Awesome Icon separate from the date-picker, to open the calendar on focus when clicked. I've attempted some solutions mentioned in this resour ...

csshtmlvue.jssass

Identifying and stopping sluggish third-party JavaScript requests

Our website utilizes various Tracking Pixels to collect data on our visitors. However, at times the third-party JavaScript embedded in our code is waiting for a response from their server. If their server fails to respond properly, it can lead to error mes ...

javascriptjqueryerror-handling