PDA

View Full Version : [2.0a1][CLOSED] vertical splitbar is not resizing a td properly in firefox


hmiatn
1 Oct 2007, 6:49 PM
[ext-build]: 2.0 [should put this in the title, but can not modify the title after I post it.]
[os]: windows vista
[browser]: firefox 2.0.0.7

Tried to implement a splitbar to resize the height of a td. The height of the td is not resizing to the drop location of the splitbar in firefox. Here is a page that demonstrates the problem.


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Height of TD</title>

<link rel="stylesheet" type="text/css" href="./resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="./resources/css/xtheme-default.css" /><!-- LIBS -->
<script type="text/javascript" src="./adapter/ext/ext-base.js"></script>

<!-- ENDLIBS -->

<script type="text/javascript" src="./ext-all.js"></script>
</head>
<body>

<table>
<tr>
<td id="testtd" style="background-color:red; padding:20px; border:2px solid green">
inside td
</td>
</tr>
<tr>
<td id="splitter" style="background-color:green; height:5px; border:2px solid green">
<td>
</tr>
</table>

<script type="text/javascript" >
var splitter = new Ext.SplitBar("splitter", "testtd",
Ext.SplitBar.VERTICAL, Ext.SplitBar.TOP);
</script>

</body>
</html>

I did some debugging, still not sure where the problem is. It seems to do with getHeight and setHeight of the td element. SplitBar does a getHeight for the td element before resizing and then does a setHeight for the td after resizing is done. However, getHeight returns a height not including padding and border, while setHeight will deduct padding and border from the height. That causes the discrpency of the drag drop location and td height. Not sure what is causing getHeight/setHeight behavior asymmetrically though.
jack.slocum
2 Oct 2007, 3:05 AM
You can't do that kind of stuff with a table. The browser determines the layout algorythm for the table.

On a side note, a TD cell) technically doesn't have a height, the row has a height. Different browsers will do different things with that as well.

To edit a post title, click on "Go Advanced" when you click edit.
hmiatn
2 Oct 2007, 10:15 AM
Thanks, Jack.
hmiatn
2 Oct 2007, 11:28 AM
We are building an email editor, so we have to stick with table layout.

I did more investigations and I think I know what is happening now. When setHeight is called for a td, padding and border are deducted from the height value (box ajustment). However, when style.height is set, td's offset height is set to be that value as well. That means firefox thinks style.Height and offsetHeight are the same for td, so we don't need to do box adjust. I tried skipping box adjust by setting the global array noBoxAdjust['td'] = 1. splitBar works fine after that.
jack.slocum
2 Oct 2007, 6:49 PM
What doc type are you using? I can do some checking and add that to the core build.