The measurement of a table cell's height containing hidden overflow child elements

I am looking to determine the actual height of the content within a table cell that has nested child items with overflow:hidden styles. Here is an example of the structure:

<tr>
    <td id="targetid">
        <div id="innertargetdiv">
            <div id="targetiddiv" style="overflow:hidden; max-height:50px;">
                Thiscell<br>
                Thiscell<br>
                Thiscell<br>
                Thiscell<br>
                Thiscell<br>
                Thiscell<br>
                Thiscell<br>
                Thiscell<br>
                Thiscell<br>
                Thiscell<br>
            </div>
        </div>
    </td>
    <td>Smith</td>
    <td>50</td>
  </tr>

Here is the JavaScript code I am using:

console.log(document.getElementById("targetid").scrollHeight);
console.log(document.getElementById("innertargetdiv").scrollHeight);
console.log(document.getElementById("targetiddiv").scrollHeight);

Output: 51 50 100

I am trying to find a way to get the total height from the "#targetid" level without expanding the content to fill the entire cell. Any suggestions on how to achieve this? I am open to AngularJS/JQuery solutions as well.

One possible recursive solution for this problem can be seen below:

var totalHeight: (any) => number = (e) => {
                var eHeight = 0;

                if (e.hasChildNodes()) {
                    eHeight = $.map(e.children, (child) => totalHeight(child))
                        .reduce((sum: number, value: number) => sum + value, 0);
                }

                //The height of the child elements might be smaller than the element with padding
                return Math.max.apply(Math, [eHeight, e.scrollHeight]);
            };

Answer №1

Thank you for your input. Below is an illustration of cloning an element:

const targetElement = document.getElementById('targetid')
const clonedElement = document.createElement('div')

clonedElement.setAttribute('id', 'clonedTarget')
clonedElement.style.visibility = 'hidden'
clonedElement.innerHTML = targetElement.innerHTML.replace(/target/g, 'clone')   

const body = document.getElementsByTagName('body')[0]
body.append(clonedElement)
document.getElementById('cloneiddiv').style = ''

const height = document.getElementById('innerclonediv').scrollHeight
document.getElementById('clonedTarget').remove()

console.log(height)
<table>
 <tr>
    <td id="targetid">
        <div id="innertargetdiv">
            <div id="targetiddiv" style="overflow:hidden; max-height:50px;">
                Thiscell<br>
                Thiscell<br>
                Thiscell<br>
                Thiscell<br>
                Thiscell<br>
                Thiscell<br>
                Thiscell<br>
                Thiscell<br>
                Thiscell<br>
                Thiscell<br>
            </div>
        </div>
    </td>
    <td>Smith</td>
    <td>50</td>
  </tr>
 </table>

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

Sending a Compressed File to Server Using AJAX

I've successfully created a php file that takes a zip file, unpacks it, and places it at the specified path on my server. While it works perfectly with a standard form that calls the php file in the action, I've been struggling to make it work w ...

I seem to be having trouble getting my style to work properly with Material UI's makeStyles

I am experiencing an issue with Material-UI makeStyles not working properly. I am trying to apply my CSS style but it doesn't seem to be taking effect. I suspect that Bootstrap or MaterialTable might be causing this problem. While Bootstrap4 works fin ...

Refreshing Flask Jinja2 template table with a button press

I am utilizing a Flask app for the automated provisioning of servers on my cloud platform, and one of the features allows users to upload a spreadsheet that is then parsed into an interactive HTML table. After populating the table with data, the fields ar ...

What could be causing the discord.js command handler to malfunction?

As I was working on developing a Discord Bot, I encountered an issue with the Command Handler while using a for loop. This is the code in Index.js: client.commands = new Collection(); const commandFiles = fs.readdirSync('./commands').filter(fil ...

Assigning attributes to inner components in VueJS based on prop values

Experimenting with some common VueJS syntax, but I am struggling to get this Button.vue SFC to function properly: <script setup> defineProps({ ... href: String, ... }); </script> ... <template> <Link :href="href&quo ...

Ways to render component solely based on the alteration of the class props

In my ReactJS project, I am fetching JSON data from a RESTful Django host and using it to create a table with filters. Here is my Table class: class MainTable extends React.Component { constructor(props) { super(props); this.state = { res ...

Utilize Flexbox and Material UI to position Item at the bottom of the layout

I'm attempting to include Unassigned Text at the bottom of my Container, following the layout shown in this mockup:https://i.sstatic.net/863cl.png Here is the code I currently have. I'm facing difficulty in getting the border between the play bu ...

execute javascript code found in the html document

Currently, I have a bash script that utilizes curl to download a page. Then, it uses grep and sed to extract javascript within the html block to a file. Following this, I use node to evaluate and leverage the downloaded javascript. Here is an example: cur ...

"Unable to locate the specified file or directory" error message pops up while attempting to save a file

Currently, I am in the process of generating a JSON file using my website with intentions to deploy it later. Below is the code snippet that I have implemented: saveFile = (i, data) => { var filename = `${i}_may.json`; var folder_list = ["desktop", ...

Treating Backbone Collection as an object instead of an array

Currently, I am working on incorporating nested comments using both Backbone and Rails. In my current setup on the server side, comment models are utilized to store the unique identifier parent_comment_id (assuming they have one). Whenever the application ...

As soon as I hover over my icon to enlarge it, I notice that my entire page starts to

Whenever I hover over my icon, the font size increases causing the div to expand slightly and move the page. This doesn't look great. How can I prevent the div from resizing when hovering over the icon? Here's my code: <div className="bg- ...

Filtering properties of objects in Vue

I am currently dealing with an array of objects that represent continents: data() { return { continents: [ { name: "South America", countries: [ { name: "P ...

Browsing through json subgroups

Having issues with filtering an array within my JSON file. Filtering the main array works fine, but I'm struggling to filter subarrays. This is the structure of my JSON file: [ { "id": 1354, "name": "name", "type": "simp ...

Static Header - Halts Animation on Downward Scroll, Resumes when Scrolling Ceases

I've implemented a fixed menu on my website. Everything seems to be working fine, but here's the issue: When I scroll down and the fixed menu starts animating, if I continue scrolling quickly, the animation pauses. It only continues when I stop ...

Set a variable in PHP by passing a value

In continuation of my previous post, I realized I missed a point and needed to start a new thread. Thankfully, I found a solution for the issue in my previous post and here is the final code: Scrapping code not working in php <?php $html = file_get_co ...

Adaptive Container with Images that are not stretched to full width

Is there a way to achieve the same effect as seen in images 2 and 3 here: Although these images already have their own "padding," I'm curious if it can be replicated using just jQuery and CSS? I would appreciate any help or insights on this. Thank y ...

Having trouble setting up my Vuex store from localStorage for authentication in Nuxt

I have been working with Nuxt.js and have been trying to create my own authentication system. Everything seems to be functioning correctly, but whenever I refresh the page, the state reverts back to its initial data. To address this issue, I attempted to i ...

ObjectArray in Node.js

Building an object array in my node app involves transforming another object array. Let's assume the initial object array is structured like this... levels: [ { country_id: 356, country_name: "aaa", level0: "bbbb", level1: "cccc", level2: "dddd", le ...

Tips for increasing the complexity of your bottom-line animation

Hello everyone, I am currently learning the basics of CSS and have a question about a specific animation effect. Please bear with me if this type of inquiry is not suitable for StackOverflow. In my index.html file, I have the following code: <n ...

What is the reason for font names appearing yellow rather than blue in the "font-family" property?

Whenever I experiment with different font names, I notice that some fonts turn blue while others remain yellow. Can anyone clarify why this is happening? font-family: Arial, Helvetica, sans-serif; font-size:12px; font-weight:normal; ...