Opened 9 years ago

Closed 8 years ago

Last modified 7 years ago

#12824 closed defect (fixed)

IE9 - When resizing browser window leading region of BorderContainer with Tree inside disappears

Reported by: Christian Ebert Owned by:
Priority: high Milestone: 1.7
Component: Dijit Version: 1.6.0
Keywords: BorderContainer, Tree Cc:
Blocked By: Blocking:

Description

I have a simple BorderContainer? with a leading and a center region. If the leading region contains a tree, the leading region disappears as soon as the window is resized. If the tree is removed everything works fine.

<!DOCTYPE HTML PUBLIC "-W3CDTD HTML 4.01 TransitionalEN" "http://www.w3.org/TR/html4/loose.dtd">

<html> <head>

<title>Auffälligkeiten</title> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" > <meta http-equiv="Content-Language" content="de" > <link rel="stylesheet" type="text/css" href="/common/dojo/1-6-0/dojo/resources/dojo.css"> <link rel="stylesheet" type="text/css" href="/common/dojo/1-6-0/dijit/themes/tundra/tundra.css"> <link rel="stylesheet" href="/common/lightbox/2-0-5/css/lightbox.css" type="text/css" media="screen" />

<link href="/favicon.ico" rel="favicon" > <link href="/dba/css/reset.css" media="screen" rel="stylesheet" type="text/css" > <link href="/dba/style.css" media="screen" rel="stylesheet" type="text/css" ><script>

var djConfig ={ baseScriptUri:"/common/dojo/1-6-0/", parseOnLoad: true };

</script> <script type="text/javascript" src="/common/dojo/1-6-0/dojo/dojo.js"></script> <script type="text/javascript" src="/common/dojo/1-6-0/dojo/dbadojo1-6-0.js"></script> <script type="text/javascript" src="/dba/js/dojoapp2.js"></script>

<style type="text/css">

html, body { width: 100%; height: 100%; margin: 0px; padding: 0px; overflow:hidden;} #borderContainer,#borderContainer2{ width: 100%; height:100%; }

</style> </head>

<body class="tundra">

<div dojoType="dijit.layout.BorderContainer?" design="sidebar" gutters="true" liveSplitters="true" id="borderContainer">

<div dojoType="dijit.layout.ContentPane?" splitter="true" region="leading" style="width: 100px;">

<div dojoType="dojo.data.ItemFileReadStore?" jsId="continentStore" url="/test.txt"></div>

<div dojoType="dijit.tree.ForestStoreModel?" jsId="continentModel" store="continentStore" query="{type:'continent'}" rootId="continentRoot" rootLabel="Continents" childrenAttrs="children"> </div> <div dojoType="dijit.Tree" id="mytree" model="continentModel" openOnClick="true">

<script type="dojo/method" event="onClick" args="item">

alert("Execute of node " + continentStore.getLabel(item) + ", population=" + continentStore.getValue(item, "population"));

</script>

</div>

</div> <div dojoType="dijit.layout.ContentPane?" splitter="true" region="center">

Hi, I'm center

</div>

</div>

Attachments (6)

screenshot1.jpg (87.8 KB) - added by Christian Ebert 9 years ago.
Before Resizing Window
screenshot2.jpg (58.0 KB) - added by Christian Ebert 9 years ago.
After resizing of Window
bc.html (2.1 KB) - added by bill 9 years ago.
self contained test case
html.js.diff (1.8 KB) - added by Franz Mayer 8 years ago.
diff of bug fix for this issue in file html.js
html_v2.js.diff (2.2 KB) - added by Franz Mayer 8 years ago.
diff of possible bug-fix for this issue in file html.js (version 2)
test_bc_resize_problem.html (3.2 KB) - added by Franz Mayer 8 years ago.
corresponding test case for diffs; test should be placed under [dojo-base]/dijit/tests

Download all attachments as: .zip

Change History (18)

Changed 9 years ago by Christian Ebert

Attachment: screenshot1.jpg added

Before Resizing Window

Changed 9 years ago by Christian Ebert

Attachment: screenshot2.jpg added

After resizing of Window

comment:1 Changed 9 years ago by Christian Ebert

Possible Workaround is to re-layout the borderContainer if window is resized :

dojo.addOnLoad(function() {

dojo.connect(window, "onresize", null, "reLayout")

});

function reLayout(){

dijit.byId('borderContainer').layout();

}

comment:2 Changed 9 years ago by bill

OK, thanks for the test case, although in the future please try to make test cases that run without requiring a build or other files. Your test case is missing a bunch of dojo.require() calls and including a bunch of files that are only on your system, including the data for the tree.

Anyway, I cleaned up your test case, and tried it on IE9. I reproduced the failure on the 1.6 branch although it is working on trunk.

Changed 9 years ago by bill

Attachment: bc.html added

self contained test case

comment:3 Changed 9 years ago by bill

FYI, I investigated this a little bit, it's the typical problem where BorderContainer (indirectly) calls dojo.marginBox(cp, {h: 1234}) on the ContentPane, and then calls dojo.marginBox(cp) to get the width. Unfortunately IE9 is returning 0 even though the node has style="width: 100px"

Changed 8 years ago by Franz Mayer

Attachment: html.js.diff added

diff of bug fix for this issue in file html.js

comment:4 Changed 8 years ago by Franz Mayer

Attached a possible bug-fix for this issue: html.js.diff. As I'm not a expert in dojo's internals, I don't know if this bug-fix fits into dojo's design and if this bug-fix might lead to any performance leak.

This bugfix was tested shortly on our internal web application, which uses a lot of dojo, esp. ConentPanes, BorderContainers , Trees, Grids, etc.

Changed 8 years ago by Franz Mayer

Attachment: html_v2.js.diff added

diff of possible bug-fix for this issue in file html.js (version 2)

Changed 8 years ago by Franz Mayer

Attachment: test_bc_resize_problem.html added

corresponding test case for diffs; test should be placed under [dojo-base]/dijit/tests

comment:5 Changed 8 years ago by Franz Mayer

Added another possible bug-fix with corresponding test case; changed some method names to be more compatible with dojo style guide. Working smoother, e.g. when no height or width is defined (as in test case is the case for top-ContentPane).

comment:6 Changed 8 years ago by Franz Mayer

The ticket is quite critical from my point of view, since it does not only effect Trees; it also effect sometimes BorderContainers - yet I haven't found any simple test case, which does show the problem.

However the above suggested solution has also fixed the problem with BorderContainers.

comment:7 Changed 8 years ago by bill

As I wrote two months ago, I reproduced the failure on the 1.6 branch although it is working on trunk. Is it still failing for you against the latest code?

comment:8 Changed 8 years ago by Franz Mayer

Replying to bill:

As I wrote two months ago, I reproduced the failure on the 1.6 branch although it is working on trunk. Is it still failing for you against the latest code?

We are using version 1.6.1 - in this patch the bug still occurs. I haven't tried trunk.

comment:9 Changed 8 years ago by bill

Milestone: tbd1.7
Resolution: fixed
Status: newclosed

comment:11 Changed 7 years ago by haysmark

I am not convinced this is plausible to backport to 1.6.

comment:12 Changed 7 years ago by bill

Well, we definitely don't want to backport the new event code in [24471]. I don't know what actually fixed the problem though. There might be a simpler fix like monitoring resize events on <html> or <body> rather than the document (or vice-versa). #14247 is possibly related.

Note: See TracTickets for help on using tickets.