FireFox, RemoveChild, AppendChild, making width grow?

Giganews Newsgroups
Subject: FireFox, RemoveChild, AppendChild, making width grow?
Posted by:  Stewart (cambridgestewa…@hotmail.com)
Date: 25 Aug 2005

Originally posted in comp.lang.javascript:

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 =3D document.getElementById('toc')=AD;
var tables =3D toc.getElementsByTagName('tabl=ADe');
var tmp =3D 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 =3D '99%';
after the appendChild, at the end, the div doesn't grow.
Note that:
toc.style.width =3D '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 =3D '99%';
> after the appendChild, at the end, the div doesn't grow.
> Note that:
> toc.style.width =3D '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=3D"text/JavaScript">
function doStuff(){
  var toc =3D document.getElementById('toc')=AD;
  var tables =3D toc.getElementsByTagName('tabl=ADe');
  var tmp =3D toc.removeChild(tables[0]);
  alert('hey');  // just to show that the table is removed & replaced
  toc.appendChild(tmp);

}

</script>
<input type=3D"button" value=3D"do stuff" onclick=3D"doStuff()">
<table><tr><td style=3D"width: 50%;">
  <div id=3D"toc" style=3D"border: 1px solid green; width: 100%;">
  <table border=3D"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=3D"text/css" media=3D"all">
div#toc
{
  border: 1px solid green;
  overflow: auto;
  width: 100%;

}

</style>
<script type=3D"text/JavaScript">
function doStuff(){
  var toc =3D document.getElementById('toc')=AD;
  var tables =3D toc.getElementsByTagName('tabl=ADe');
  var tmp =3D toc.removeChild(tables[0]);
  //alert('hey');  // just to show that the table is removed &
replaced
  toc.appendChild(tmp);

}

</script>
</head>
<body>
<input type=3D"button" value=3D"do stuff" onclick=3D"doStuff()">
<table>
  <tr>
    <td style=3D"width: 50%;">
      <div id=3D"toc">
  <table> <tr> <td>
        LHS
    </td> </tr> </table>
  </div>
</td>
    <td style=3D"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 =3D '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 =3D '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=20

  comp.infosystems.www.authoring.css=20

--=20
Rob

Replies