Opened 11 years ago

Closed 11 years ago

#9081 closed defect (invalid)

dijit.layout.BorderContainer resize could be broken in IE6-7 and Opera 9.64

Reported by: Aleksey Rechinskiy Owned by:
Priority: high Milestone: tbd
Component: Dijit Version: 1.3.0
Keywords: Cc:
Blocked By: Blocking:

Description

Hi!

I've spent some time creating a test, that demonstate one major bug, I encountered during upgrading to Dojo 1.3.

Please, take a look into the following simple code. It creates a dijit.layout.BorderContainer?, and sets up a code, that makes this BorderContainer? maximized to a whole visible page. This code runs perfectly fine in dojo 1.2.3 in IE6-7, Firefox 3 and Opera 9.64, but is broken in Dojo 1.3 in IE6-7 and Opera 9.64. It changes height of BorderContainer?, but does not change height of inner ContentPanes? (or in some cases changes it in some strange way - resize browser window some times). In Firefox, however, it works still fine.

Please, correct me if I'm doing something wrong. I'm not completely sure, that my code is valid. However, if it is a bug in Dojo, I'll be happy, when it will be fixed.

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>dijit.layout.BorderContainer resize test</title>

<link href="/js/dojo/dojo/resources/dojo.css" media="screen" rel="stylesheet" type="text/css" />
<link href="/js/dojo/dijit/themes/tundra/tundra.css" media="screen" rel="stylesheet" type="text/css" />
<script type="text/javascript" djConfig="parseOnLoad:true, isDebug:true, popup:false" src="/js/dojo/dojo/dojo.js"></script>
<script type="text/javascript">
    //<![CDATA[
dojo.require("dojo.parser");
dojo.require('dijit.layout.BorderContainer');
dojo.require('dijit.layout.ContentPane');
	//]]>
</script>

<style type="text/css">
body, html { width:100%; height:100%; margin:0; padding:0; }
		
#brdCont {
height:300px;
width:100%;
} 
#innerDiv {
height:100%;
width:100%;
background-color:#FFF0F0;
}

#centerPane{
background-color:#F0FFF0;
}

#rightPane{
background-color:#F0F0FF;
}
</style>

<script type="text/javascript">

getWHeight=function() {
	if (window.self && self.innerHeight) {
		return self.innerHeight;
	}
	if (document.documentElement && document.documentElement.clientHeight) {
		return document.documentElement.clientHeight;
	}
	return 0;
}

var resizeFunc = function(){
	console.log('In resizeFunc');
	
	var offsetTop = 0;
	var brdCont = dojo.byId("brdCont");
	if (!brdCont)
		return;
	for (var elem = brdCont; elem; elem = elem.offsetParent)
	{
		offsetTop += elem.offsetTop;
	}
	var wh = getWHeight();
	//assert we are coherent with Dojo's routine
	var whd = dijit.getViewport();
	if (whd.h != wh){
		console.error('If you see this, getWHeight() is not coherent with dijit.getViewport(), but you shouldn\'t');
		console.dir(whd);
	}
	
	var height = (wh - offsetTop);

	console.log('Window height is '+wh+'px. OffsetTop is '+offsetTop+'px. Going to resize BorderContainer to '+height+'px');
	
	if (height >= 0) {
		brdCont.style.height = height + "px";
		
	}	
}

var myOnLoad = function(){
	//connecting resize function
	dojo.connect(window,"onresize","resizeFunc");
	//and do resize right now
	resizeFunc();	
};

dojo.addOnLoad(myOnLoad);

</script>

</head>
<body class="tundra">
<div style='height:60px; background-color:#FFFFF0;'><center style='padding:20px;'><p>I'm a custom header</p></center></div>

<div id='brdCont' dojoType="dijit.layout.BorderContainer" design="headline" persist="false" gutters="false" liveSplitters="false">

<div id='leftPane' splitter="true" dojoType="dijit.layout.ContentPane" region="left" style="width: 35%;">
	<div id='innerDiv'><center style='padding:20px;'><p>This is left pane</p></center></div>
</div>

<div id="centerPane" dojoType="dijit.layout.ContentPane" region="center" class='trip-view'>
	<h1>Central pane</h1>

</div>

<div id="rightPane" dojoType="dijit.layout.ContentPane" region="right" style="width: 135px;">
	<div id="rp" class="container"><p>Right pane</p></div>
</div>

</div>

</body>
</html>

Attachments (1)

test_BorderContainer_InnerResize.html (3.0 KB) - added by Aleksey Rechinskiy 11 years ago.

Download all attachments as: .zip

Change History (4)

Changed 11 years ago by Aleksey Rechinskiy

comment:1 Changed 11 years ago by bill

Milestone: 1.3.1tbd
Priority: highnormal

It looks like you are adjusting the size of the BorderContainer's domNode but not even telling BorderContainer that it's size has changed... typically you would do something like this to adjust the size:

dijit.byId("brdCont").resize(dijit.getViewport());

I guess you could also modify the size manually and then just call resize() (with no arguments) to tell BorderContainer that it's size has changed, although it's safer to do the code above.

So this looks like it's not a bug. Does the code above work for you?

As for Opera, as I've mentioned in the other tickets you've opened Opera is not supported by dijit currently.

comment:2 Changed 11 years ago by Aleksey Rechinskiy

Aaah... I shouldn't rely on my legacy code... I've tried to call resize() after updating container size and it worked. You are absolutely right, this is my mistake. Thanks for help, this is not a Dojo's issue.

As for Opera, as I've mentioned in the other tickets you've opened Opera is not supported by dijit currently.

Yes, I know, officially it isn't supported, but big part of code works there. I never opened new tickets for Opera only. I've just mentioned, that is has some errors too, in addition to bugs in FF or IE, because it could be interesting. I won't do it further, ok.

Thanks again for help, I should review my legacy code...

comment:3 Changed 11 years ago by bill

Resolution: invalid
Status: newclosed

OK good, glad it's working.

Note: See TracTickets for help on using tickets.