Newsgroups: comp.lang.javascript
From: "Stewart"
Date: 23 Aug 2005 02:50:04 -0700
Local: Tues, Aug 23 2005 10:50 am
Subject: FireFox, RemoveChild, AppendChild, making width grow?
Hi,
I have a div with a table under it. I'm using the DOM to change that
table dynamically. But when I run it under FireFox, it makes the div
holding the table grow width-ways. The div itself has no assigned
width, although it is inside a td which has a % width set.
I experimented with removing and appending the same table, to prove it
was nothing to do with the data, and sure enough, the div still grows!
I have run out of ideas as to how to debug or fix this. Anyone shed any
light?
Example code (for making your div get wider) is:
var toc = document.getElementById('toc')*;
var tables = toc.getElementsByTagName('tabl*e');
var tmp = toc.removeChild(tables[0]);
toc.appendChild(tmp);
Stewart
Newsgroups: comp.lang.javascript
From: "Stewart"
Date: 23 Aug 2005 03:06:44 -0700
Local: Tues, Aug 23 2005 11:06 am
Subject: Re: FireFox, RemoveChild, AppendChild, making width grow?
OK, I found a hack, ugly as it is:
I experimented with width properties of the div.
By having:
toc.style.width = '99%';
after the appendChild, at the end, the div doesn't grow.
Note that:
toc.style.width = '100%';
does allow the growing width.
Newsgroups: comp.lang.javascript
From: RobG
Date: Wed, 24 Aug 2005 02:59:17 GMT
Local: Wed, Aug 24 2005 3:59 am
Subject: Re: FireFox, RemoveChild, AppendChild, making width grow?
Stewart wrote:
OK, I found a hack, ugly as it is: I experimented with width properties of the div.
By having:
toc.style.width = '99%';
after the appendChild, at the end, the div doesn't grow.
Note that:
toc.style.width = '100%';
does allow the growing width.
There is more to this than you are letting on. The following test does
not exhibit your 'growing' behaviour.
<script type="text/JavaScript">
function doStuff(){
var toc = document.getElementById('toc')*;
var tables = toc.getElementsByTagName('tabl*e');
var tmp = toc.removeChild(tables[0]);
alert('hey'); // just to show that the table is removed & replaced
toc.appendChild(tmp);
}
</script>
<input type="button" value="do stuff" onclick="doStuff()">
<table><tr><td style="width: 50%;">
<div id="toc" style="border: 1px solid green; width: 100%;">
<table border="1">
<tr>
<td>This is the table</td>
<td>This is the table</td>
</tr>
<tr>
<td>This is the table</td>
<td>This is the table</td>
</tr>
</table>
</div>
</td></tr></table>
--
Rob
Newsgroups: comp.lang.javascript
From: "Stewart"
Date: 24 Aug 2005 07:01:10 -0700
Local: Wed, Aug 24 2005 3:01 pm
Subject: Re: FireFox, RemoveChild, AppendChild, making width grow?
Rob,
You are absolutely correct. Your script does not reproduce this.
I took your script and added to and modified it based on my page, until
it did reproduce the error, and then through trial & error isolated the
minimum needed to this.
I found it's down to the CSS: specifically, having overflow:auto and
width set for the div tag.
This script does produce the growing width effect:
<html>
<head>
<style type="text/css" media="all">
div#toc
{
border: 1px solid green;
overflow: auto;
width: 100%;
}
</style>
<script type="text/JavaScript">
function doStuff(){
var toc = document.getElementById('toc')*;
var tables = toc.getElementsByTagName('tabl*e');
var tmp = toc.removeChild(tables[0]);
//alert('hey'); // just to show that the table is removed &
replaced
toc.appendChild(tmp);
}
</script>
</head>
<body>
<input type="button" value="do stuff" onclick="doStuff()">
<table>
<tr>
<td style="width: 50%;">
<div id="toc">
<table> <tr> <td>
LHS
</td> </tr> </table>
</div>
</td>
<td style="width: 50%;">RHS</td>
</tr>
</table>
</body>
</html>
Stewart
Newsgroups: comp.lang.javascript
From: "Stewart"
Date: 24 Aug 2005 07:06:44 -0700
Local: Wed, Aug 24 2005 3:06 pm
Subject: Re: FireFox, RemoveChild, AppendChild, making width grow?
However, bizarrely enough, I have to add:
toc.style.width = '95%';
to prevent the growth with a hack, on this script.
Values of 96% or greater allow the growth.
Maybe this is something to do with margins and padding?
Newsgroups: comp.lang.javascript
From: RobG
Date: Thu, 25 Aug 2005 01:07:32 GMT
Local: Thurs, Aug 25 2005 2:07 am
Subject: Re: FireFox, RemoveChild, AppendChild, making width grow?
Stewart wrote: However, bizarrely enough, I have to add:
toc.style.width = '95%';
to prevent the growth with a hack, on this script.
Values of 96% or greater allow the growth. Maybe this is something to do with margins and padding?
Hmm, you could ask in a CSS or HTML forum such as:
comp.infosystems.www.authoring.html
or
comp.infosystems.www.authoring.css
--
Rob
