Opened 6 years ago

Closed 6 years ago

Last modified 6 years ago

#16980 closed defect (invalid)

Dojo BorderContainer, TabContainer, and ContentPanes Disappear IE browsers when resized

Reported by: PJK Owned by: bill
Priority: undecided Milestone: tbd
Component: Dijit Version: 1.8.3
Keywords: Cc:
Blocked By: Blocking:

Description

Issue with ContentPanes? within TabContainer? and BorderContainers?.

It seems when you programmically add a dojox ContentPane? or dijit ContentPane? and resize the browser window in IE 7 or IE 8, the ContentPane? is cleared out. The static ContentPane? does not have the issue. FireFox? displays both fine.

Anything wrong with my syntax?

<html> <head>

<link rel="stylesheet" href="dojo/resources/dojo.css"> <link rel="stylesheet" href="dijit/themes/claro/claro.css"> <script>dojoConfig = {parseOnLoad: true}</script><script src='dojo/dojo.js'></script>

<script type="text/javascript"> dojo.require("dijit.layout.BorderContainer?"); dojo.require("dijit.layout.TabContainer?"); dojo.require("dijit.layout.ContentPane?"); dojo.require("dojox.layout.ContentPane?"); dojo.require("dojo.parser"); require(["dojo/ready", "dijit/layout/TabContainer", "dijit/layout/ContentPane"], function(ready, TabContainer?, ContentPane?){ ready(function(){ var mainTC = dijit.byId("mainTC"); var tc = new dijit.layout.TabContainer?({ tabposition: "bottom", style: "height: 100%; width:100%" }, "newTab"); var cp = new dijit.layout.ContentPane?({ title: "New Tab", region: "center", closable: true, content: "Dynamic Content..." }); tc.addChild(cp); tc.startup(); mainTC.addChild(cp); mainTC.selectChild(cp); }); }); </script> </head>

<body class="claro">

<div dojoType="dijit.layout.BorderContainer?" data-dojo-props="design:'headline', gutters:false" style="background-color:green; height:100%; width:100%; border:solid 3px;">

<div dojoType="dijit.layout.ContentPane?" region="top" style="height:100px; splitter="true" minsize=10 max size=100>Top</div>

<div dojoType="dijit.layout.BorderContainer?" data-dojo-props="region: 'center', design:'headline', gutters:false">

<div dojoType="dijit.layout.TabContainer?" data-dojo-props="region: 'center', tabPosition: 'bottom', id: 'mainTC'">

<div dojoType="dojox.layout.ContentPane?" data-dojo-props="region: 'center', title: 'Static Tab'" >Static Tab Content...</div>

</div>

<div dojoType="dijit.layout.ContentPane?" region="bottom" style="background-color:red;height:100px; splitter="true">Bottom</div>

<div dojoType="dijit.layout.ContentPane?" region="left" style="background-color:yellow;width:100px; splitter="true">Left</div>

</div>

</body> </html>

Attachments (1)

PaneIssue.txt (2.2 KB) - added by PJK 6 years ago.

Download all attachments as: .zip

Change History (6)

comment:1 Changed 6 years ago by bill

Resolution: invalid
Status: newclosed

Yes, you are missing CSS like:

html, body {
   height: 100%;
   width: 100%;
}

See http://dojotoolkit.org/reference-guide/1.8/dijit/layout/BorderContainer.html#setting-sizes.

Also, maxsize is one word, not two.

If after fixing that you still have an issue you can attach the test case using the *attach file* button.

comment:2 Changed 6 years ago by PJK

Tried your suggestions, still behaving flaky. There is a Bug for IE. Please see file attached demoing the issue in IE 7 or 8.

Last edited 6 years ago by PJK (previous) (diff)

Changed 6 years ago by PJK

Attachment: PaneIssue.txt added

comment:3 Changed 6 years ago by bill

OK, well there are still strange things about your test:

  1. In the code below, there is no element with id=newTab.
var tc = new dijit.layout.TabContainer({
	tabposition: "bottom",
	style: "height: 100%; width:100%"
}, "newTab");
  1. You are trying to add cp to two different places.
tc.addChild(cp);
tc.startup();

mainTC.addChild(cp);

Is cp supposed to be a child of tc, or mainTC? You need to choose one way or the other; you cannot do both.

comment:4 Changed 6 years ago by PJK

Thanks, removing the call .startup(); did the trick. It hard to decide when to use .startup() on certain layout elements. Issue is resolved.

Last edited 6 years ago by PJK (previous) (diff)

comment:5 Changed 6 years ago by bill

OK, glad it's working for you. Note though that your test case still doesn't make any sense, even if you remove the startup() call, for the reasons I listed above.

Note: See TracTickets for help on using tickets.