Opened 13 years ago

Closed 12 years ago

#2510 closed defect (wontfix)

getBoxSizing does not work consistently for certain HTML elements

Reported by: jmargaris@… Owned by: sjmiles
Priority: high Milestone:
Component: HTML Version: 0.4.1
Keywords: Cc: sjmiles
Blocked By: Blocking:

Description

In dojo .3.1, using the old style.js file, there is a comment above the box sizing stuff:

FIXME: these work for some elements (e.g. DIV) but not others (e.g. TABLE, TEXTAREA)

In the newest version of dojo style.js has been replaced with html.layout.js. That file no longer has the FIXME but the code appears to have the same problem from what I can tell.

I can confirm that the original FIXME comment is indeed correct. I have code (which is below) that attempts to lay out the children of a DIV. The children are tables and have thick borders. The code is supposed to make the child tables stack from top to bottom, filling up the space exactly, but in IE there is blank space between them.

In my code I fixed this by dynamically changing the definition of getBoxSizing. Again this is in .3.1 but it looks like the problem still exists in .4.1. First, how I fixed this. (This fix is not well tested) I simply added a check for table and a hack that seems to work in IE under non-quirks mode.

//I added the first part that checks for table, the dojo people have a fixme
//the setOuterHeight stuff doesn't really work for table...this is just a hack for now...
dojo.style.getBoxSizing = function(node){
	if (node.nodeName=='table' || node.nodeName=='TABLE'){
		if ( dojo.render.html.ie){
			return dojo.style.boxSizing.CONTENT_BOX;
		}
		else{
			return dojo.style.boxSizing.BORDER_BOX;
		}
	}
	if(( dojo.render.html.ie)||( dojo.render.html.opera)){ 
		var cm = document["compatMode"];
		if((cm == "BackCompat")||(cm == "QuirksMode")){ 
			return dojo.style.boxSizing.BORDER_BOX; 
		}else{
			return dojo.style.boxSizing.CONTENT_BOX; 
		}
	}else{
		if(arguments.length == 0){ node = document.documentElement; }
		var sizing = dojo.style.getStyle(node, "-moz-box-sizing");
		if(!sizing){ sizing = dojo.style.getStyle(node, "box-sizing"); }
		return (sizing ? sizing : dojo.style.boxSizing.CONTENT_BOX);
	}
}

For reference here is my code that produces the problem. This code is part of a large project but it is somewhat understandable, a custom component that does top to bottom layout where some of the components are flexible and grow/shrink to fill space. Using a mix of alerts, screenshots and MSPaint I can see that all the numbers look good, everything is fine except the setOuterHeight() isn't doing the right thing.

	onResized: function(){
		var freeSpace = dojo.style.getContentHeight(this.domNode);
		var children = this.children;
		for (var i = 0; i < children.length; i++) {
			freeSpace -= dojo.style.getOuterHeight(children[i].domNode);
		}
		
		//figure out how much space 1 'point' of flex is worth
		var flexUnit = freeSpace/this._totalFlex;
		var y = 0;
		
		for (var i = 0; i < children.length; i++) {
			var child = children[i];
			child.domNode.style.position="absolute";
			child.domNode.style.top = y + "px";
			y +=  dojo.style.getOuterHeight(child.domNode)
			if (child.domNode.flex){
				dojo.style.setOuterHeight(child.domNode,dojo.style.getOuterHeight(child.domNode) + (flexUnit * child.domNode.flex));
				y += (flexUnit * child.domNode.flex);
			}	
		}
      }

Final note: I created an HTML file to test this out, and that file looks exactly the same in both Firefox and IE6. In this file I set a table and a div up the same way with the same size and border - but in both browsers the table is smaller than the div! That seems to indicate that my getBoxSizing fix should apply to more than just IE, but if I make it apply to Mozilla as well it comes out wrong.

My guess would be that changing the width/height on the fly has a somewhat different behavior from the initial size being set in the Mozilla engine. It looks like when you set it on the fly it does the right thing with the CSS size model but setting it initially does not...near as I can tell...where as IE refuses to use the CSS size model for table at all. Here is that page in full:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<body>

	<table style="width:100px; height:100px; border-width:20px; border-style:solid;border-color:black">
		<tr><td>asd</tr></td>
	</table>

	<div style="width:100px; height:100px; border-width:20px; border-style:solid;border-color:red">
		asd
	</<div>
</body>

Change History (2)

comment:1 Changed 12 years ago by Adam Peller

Cc: sjmiles added
Component: GeneralHTML
Owner: changed from anonymous to sjmiles

comment:2 Changed 12 years ago by sjmiles

Resolution: wontfix
Status: newclosed

0.9 has new logic which adapts to special box-models on certain elements (i.e. TABLE and BUTTON)

Note: See TracTickets for help on using tickets.