Question

Here’s my code:

• First I assign some htm code where there’s a table in it.
• (the table is not visible)
• then I dump the height: it is 0 for each row.
• then I fadeIn() the table
• then I dump the height: it is 320px for each row.

Have you any idea how I could do to compute height before rendering?

My goal is to “cut” some information in the rows if their height is too big.

  $('#tableau').html(htm);
  $('.tableau tr td').each(function() {
    console.log($(this).height());
  } );
  $('#wait').queue(function() {
    $('#tableau').fadeIn(100).queue(function() {
        $('.tableau tr td').each(function() { console.log($(this).height()); } );
      }   
    );  
  });

I know it sounds like here but it’s not exactly the same problem.

Thank you!

Answer 1

It’s not possible to get the height before rendering. You’ve got three options:

1. Render all elements at once, then get the height.
2. Append one element, check the height, and assume this height to be the same for each consecutive element.
3. A very different approach: Add max-height: 100px (example) to the selector of your element.