Read scrollHeight div with display: none parent

Question

With the div element in the parent div , which is hidden with display:none .

• I am dumping the jQuery textarea element to the console. I see that the scrollHeight property for element 0 is 88 .
• I try to read this property in var (using $(element)[0].scrollHeight or $(element).prop('scrollHeight') and I get 0 .

I also tried setting textarea to position: absolute and display: block using jQuery before reading with the same result.

How can I read the property correctly?

Answer 1

What is the size of an element when display:none ? 0px to 0px

The element was not displayed or drawn anywhere on the screen, so it really takes up zero space. It is difficult to answer the question of whether it was clear how much space he would occupy, because to answer it exactly means to turn a hypothetical reality into reality. We would have to actually make it in order to get a reliable estimate of its size.

Generally speaking, this includes either:

1. Switching - quickly make the element visible, check the height and restore back

   When switching, you can make visible and undo between drawing cycles, but there is no guarantee. Especially if the item you want to measure is deeply embedded in the hidden parent.

2. Cloning - emulate the properties of an element as best as possible and rendering off-screen

   When cloning, the dimensions of an element are based on a large number of other elements and the properties surrounding it. Depending on the complexity of your page, there is also no guarantee that creating an item off-screen will result in the exact same dimensions as the original.

There are several solutions outlined in the following questions, but most of them follow this basic pattern:

• Need to find the height of the hidden div set for display:none
• Get element size inside display:none parent
• Check if element is visible in DOM

There is also a library called jQuery.Actual (2.4 KB) that abstracts some of these works:

Here is their own demo page, as well as a fragment of the stack :

 console.log("width: ", $("#inner").actual("width")) console.log("height: ", $("#inner").actual("height")) 

 #outer, #inner { margin: 10px; padding: 10px; } #outer { background: #d1e3ef; } #inner { background: #9ebae9; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.actual/1.0.19/jquery.actual.min.js"></script> <div id="outer" style="display:none"> <code>#outer</code> <div id="inner"> <code>#inner</code> </div> </div> 

Answer 2

You need to set the dispaly: block property for the parent div. And after getting scrollheight with $ (element) [0] .scrollHeight you can set the display: none for the main div.

So your code will be

 $('#mainDiv').show(); // Dump html to div // Read height var heightOfDiv = $('#mainDiv')[0].scrollHeight // Hide the div $('#mainDiv').hide(); 

Answer 3

No, unfortunately, this is not possible.

I suggest you read these links: MDN | A display or item from an inventory that evokes the notion of accessibility and visibility of the DOM. In fact, if you put the item in " display: none ", it will not be visible and will exit the DOM accessibility tree . However, there are some methods that allow you to make the DOM element completely invisible and no longer be considered existing in the DOM.

Then there are obviously methods you should know

First, if you want to completely mask your parent div without worrying about its dimensions , I suggest the code below. The clip property is deprecated, but without it, it will still hide our element.

 console.log(document.getElementById('child').scrollHeight); 

 .hidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; white-space: nowrap; width: 1px; z-index: -1; } 

 <div class="hidden parent" href="#main"> I am ignored by the DOM <div id="child">I am child</div> </div> <span style="color:red">I am the N°1</span> 

Otherwise, if you want to keep the dimensions of your parent div , you can pull it out of the DOM stream.

 console.log(document.getElementById('child').scrollHeight); 

 .hidden { height: auto; width: auto; visibility: hidden; position: absolute; z-index: -1; } 

 <div class="hidden parent" href="#main"> I am ignored by the DOM <div id="child">I am child</div> </div> <span style="color:red">I am the N°1</span> 

I hope this answer is helpful.

Answer 4

An element with display: none will not only not be displayed, but will not be processed by the DOM tree. This is why scrollHeight will be 0.

Otherwise, with visibility: hidden element will not be visible, however its space will be reserved in the DOM. So it will have scrollHeight other than 0.

Then, to read the property and keep the element hidden, you can use $('#elementId').prop('visibility','hidden'); $('#elementId').prop('scrollHeight') $('#elementId').prop('visibility','hidden'); $('#elementId').prop('scrollHeight') $('#elementId').prop('visibility','hidden'); $('#elementId').prop('scrollHeight') $('#elementId').prop('visibility','hidden'); $('#elementId').prop('scrollHeight') .