We help IT Professionals succeed at work.

Accessing row heights with the DOM.

556 Views
Last Modified: 2013-11-19
I'm trying to have two rows - in separate tables - be equal in height. The problems are that:

a) The height tag is deprecated, so it's not a viable long term solution
b) the height is not known at runtime - it's based on the content.

I have 2 examples of code, the first doesn't work, the second one does. What I'm trying to determine is why...

This doesn't work:
http://www.pdgmedia.com/ee/dom_check1.html

function sizeRows()
{
document.getElementById('row1').height = document.getElementById('row2').offsetHeight;
}

This does work:
http://www.pdgmedia.com/ee/dom_check2.html

function sizeRows() {
  var height;
  document.getElementById('row1').height = document.getElementById('row2').offsetHeight;
  height = document.getElementById('row2').offsetHeight;
  document.getElementById('row2').height = height;
  document.getElementById('row1').height = height;
}

Both are called onload:
<body onload="sizeRows();">

The table code is the same in both cases

<table cellspacing="0">
  <tr>
    <td>
    <table id="table1" cellspacing="0">
      <tr id="row1">
        <td>
        Data in Table One
        </td>
      </tr>
    </table></td>
    <td>
    <table id="table2" cellspacing="0">
      <tr id="row2">
        <td>
        Data in Table Two<br />
        Data in Table Two<br />
        Data in Table Two<br />
        Data in Table Two<br />
        </td>
      </tr>
    </table></td>
  </tr>
</table>

So:

1. Why does the second example work - it seems like unecessary duplication - to the untrained eye :-)

2. Nether work in Mozilla - which is a problem.

Thanks - your input is greatly appreciated.
Sean
Comment
Watch Question

Top Expert 2013

Commented:
The offsetHeight property is a DOM element, and height is an HTML attribute, there is probabaly a data typing issue or it is possible the the first statement creates the attribute but does not populate it, because it is string datatype.  Also I think height is not valid for TR you have to apply it to td.

It has no chance of working iin a standards compliant browser because there is no unit of measure.

This should work cross-browser:

  H = Math.max(document.getElementById('row2').offsetHeight,document.getElementById('row1')
  document.getElementById('row2').style.height = H+'px';
  document.getElementById('row1').style.height = H+'px';

I made the assumption that you want the height of the smaller row expanded so I used the max method of the Math object to set the base height.

Cd&
Top Expert 2013

Commented:
If that does not take, you might have to force it in the td with:

  H = Math.max(document.getElementById('row2').offsetHeight,document.getElementById('row1')
  document.getElementById('row2').childNodes[0].style.height = H+'px';
  document.getElementById('row1').childNodes[0].style.height = H+'px';

But it you do that put the td for the first cell in the rows on the same lin as teh tr with no spacing to prevent a phnato,m whitespace node.

Cd&
Top Expert 2004

Author

Commented:
Maybe have a peek at the source code - in case there's a typo, or I've misinterpreted your code :-)
I can't get either to behave in IE or MOZ.

Setting the height on the td:
http://www.pdgmedia.com/ee/dom_check3.html

Setting the height on the tr:
http://www.pdgmedia.com/ee/dom_check4.html
Top Expert 2004

Author

Commented:
Hold on - didn't see your last comment...
Top Expert 2004

Author

Commented:
Top Expert 2013
Commented:
Unlock this solution and get a sample of our free trial.
(No credit card required)
UNLOCK SOLUTION
Top Expert 2004

Author

Commented:
Yes - that was a biggy :-)

That last fix corrected the problem. Interestingly, and as you noted, Opera (FWIW) needs the id on the <td> - it doesn't respond to the id on the <tr>.

So, the corrected code is:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<head>
<title>Tables</title>

<script type="text/javascript">

function sizeRows() {
  H = Math.max(document.getElementById('row2').offsetHeight,document.getElementById('row1').offsetHeight);
  document.getElementById('row2').style.height = H+'px';
  document.getElementById('row1').style.height = H+'px';
}

</script>
</head>
<body onload="sizeRows();">

<table cellspacing="0">
  <tr>
    <td>
    <table id="table1" cellspacing="0">
      <tr>
        <td id="row1">
        Data in Table One
        </td>
      </tr>
    </table></td>
    <td>
    <table id="table2" cellspacing="0">
      <tr>
        <td id="row2">
        Data in Table Two<br />
        Data in Table Two<br />
        Data in Table Two<br />
        Data in Table Two<br />
        </td>
      </tr>
    </table></td>
  </tr>
</table>
</body>

Thanks Cd&, nicely done, as always.

Sean


n.b. Functions as desired in NS 6, NS 7, IE, Mozilla, Opera and Firebird.
Top Expert 2013

Commented:
I think the slight difference in opera is actually closer to the strict interpretation of the standards, but I normally don't set height on the tr tags anyway.  I prefer to keep height and width together so I normally set the height on the first cell in a table.

Glad I could help.  Thanks for the A. :^)

Cd&
Unlock the solution to this question.
Thanks for using Experts Exchange.

Please provide your email to receive a sample view!

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.