Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

Solved

Accessing row heights with the DOM.

Posted on 2004-03-27

1 solution

Medium Priority

516 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

Question by:seanpowell

[X]

Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

Help others & share knowledge
Earn cash & points
Learn & ask questions

Join The Community

8 Comments

LVL 53

Expert Comment

by:COBOLdinosaur

ID: 106954672004-03-27

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&

LVL 53

Expert Comment

by:COBOLdinosaur

ID: 106954782004-03-27

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&

LVL 31

Author Comment

by:seanpowell

ID: 106955002004-03-27

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

LVL 31

Author Comment

by:seanpowell

ID: 106955032004-03-27

Hold on - didn't see your last comment...

LVL 31

Author Comment

by:seanpowell

ID: 106955142004-03-27

Still no joy...
http://www.pdgmedia.com/ee/dom_cd1.html

LVL 53

Accepted Solution

by:COBOLdinosaur

COBOLdinosaur earned 2000 total points

ID: 106961492004-03-27

LOL... This is a really big typo. It looks like I chop the line to fit the text area or something.

This line:
H = Math.max(document.getElementById('row2').offsetHeight,document.getElementById('row1')

Should be:
H = Math.max(document.getElementById('row2').offsetHeight,document.getElementById('row1').offsetHeight);

All one line of course.

When a change it on your first test page it resizes correctly in Moz1.6

Cd&

LVL 31

Author Comment

by:seanpowell

ID: 106961942004-03-27

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.

LVL 53

Expert Comment

by:COBOLdinosaur

ID: 106962332004-03-27

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&

Featured Post

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Create N column layout for Bootstrap

Article by: Julian

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.

Add Theme to ASP.NET MVC

Article by: Shaun

The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project

Introduction to HTML (Part 1)

Video by: Jason

The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

Introduction to PHP: Building the Form

Video by: Jason

The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …