#10555 closed defect (invalid)
BorderContainer layout doesn't work in DIV blocks
| Reported by: | canto | Owned by: | |
|---|---|---|---|
| Priority: | low | Milestone: | tbd |
| Component: | Dijit | Version: | 1.3.2 |
| Keywords: | BorderContainer layout | Cc: | |
| Blocked By: | Blocking: |
Description
Hello,
I am trying to display one BorderContainer? containing several ContentPanes? in my testing page. But the layout of the border containter seems having conflict with one of the DIV tags in the page. Can you pls check if this is a defect or something.
Save the below code as a html file and run it under \dijit\tests\layout.
Expected result: the border container with four content panes getting displayed.
Actual result: All four content panes fail to be displayed. Looks like the inline style attributes of each pane are not well applied.
I also noticed that if I remove the <div id="widget1"> tag, everything. So maybe something in the BorderContainer?.display() conflicts with the DIV tag? Hope this can help with evaluating the problem...
Thanks.
James.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>dijit.layout.BorderContainer Test</title>
<!-- only needed for test files: -->
<style type="text/css">
@import "../../../dojo/resources/dojo.css";
@import "../css/dijitTests.css";
/* styles for this test */
.dijitContentPane:focus { color: cyan; font-weight: bold }
body { margin-left: 20px }
#mondrian .dijitSplitter { border: 0; background: black !important }
#mondrian .dijitSplitterH { height: 10px }
#mondrian .dijitSplitterV { width: 10px }
#mondrian .dijitSplitterThumb { display: none }
#mondrian .dijitSplitterActive { background-color: blue }
#mondrian SPAN { display: none }
#mondrian:hover SPAN { display: inline }
</style>
<!-- required: the default dijit theme: -->
<link id="themeStyles" rel="stylesheet" href="../../../dijit/themes/tundra/tundra.css">
<!-- required: dojo.js -->
<script type="text/javascript" src="../../../dojo/dojo.js"
djConfig="isDebug: true, parseOnLoad: true"></script>
<!-- only needed for alternate theme testing: -->
<script type="text/javascript" src="../_testCommon.js"></script>
<script type="text/javascript">
dojo.require("dijit.dijit"); // optimize: load dijit layer
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.form.FilteringSelect");
</script>
</head>
<body class="tundra">
<div id="container" style="height: 100%; width: 100%; background-color: blue; opacity: 1;">
<div id="widget1_widget_skin" style="position: absolute; width: 560px; top: 66px; left: 80px; z-index: 50; height: 201px; border: 1px solid red;">
<div id="widget1">
<div id="border1" dojoType="dijit.layout.BorderContainer" style="width: 100%; height:100%;">
<div dojoType="dijit.layout.ContentPane" region="top" style="background-color: #b39b86; height: 50px;" splitter="true" role="banner">
top bar (resizable)
</div>
<div id="border1-left" dojoType="dijit.layout.ContentPane" region="left" style="background-color: #acb386; width: 50px;"
role="navigation" splitter="true" minSize="50" maxSize="150">
left (resizable b/w 150 → 250)
</div>
<div dojoType="dijit.layout.ContentPane" region="center" style="background-color: #f5ffbf;" role="main">
Here's some text that comes AFTER the combo box.
</div>
<div dojoType="dijit.layout.ContentPane" region="right" style="background-color: #acb386; width: 50px;">
right (fixed size)
</div>
<div dojoType="dijit.layout.ContentPane" region="bottom" style="background-color: #b39b86; height: 50px;" splitter="true" role="contentinfo">
bottom bar (resizable)
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Change History (3)
comment:1 follow-up: 3 Changed 10 years ago by
| Priority: | high → low |
|---|
comment:2 Changed 10 years ago by
| Resolution: | → invalid |
|---|---|
| Status: | new → closed |
What's happening is that the <div id="widget1"> gets 0 width because the BorderContainer gets 0 width. I don't think width: 100% works when referring to a position: absolute parent, although not sure exactly why, but that's just a browser thing, not an issue with BorderContainer.
comment:3 Changed 10 years ago by
Bill,
Thanks for the analysis. Yep I think you were right, changing <div id="widget1"> to <div id="widget1" style="width:100%;height:100%"> can fix this. so every DIV tag in the dom tree should have an assigned size.
The page looks strange because it was made by modifying the original boarderContainer test case, and I just didn't remove all the redundant stuff.
This is a rather strange page design. You are missing the:
html, body { height: 100%; width: 100%; padding: 0px; margin: 0px; }... which makes the initial
rather meaningless. But beyond that it's strange to have the
<div id="widget1_widget_skin" style="position: absolute; width: 560px; top: 66px; left: 80px; z-index: 50; height: 201px; border: 1px solid red;"> <div id="widget1"> <div id="border1" dojoType="dijit.layout.BorderContainer" style="width: 100%; height:100%;">and then stick the BorderContainer inside of that. Is there some reason you want to put a BorderContainer inside a position: absolute block? Is there some reason for the <div id="widget1">.... could those three div's be turned into a single:
<div style="position: absolute; width: 560px; top: 66px; left: 80px; z-index: 50; height: 201px; border: 1px solid red;"> id="border1" dojoType="dijit.layout.BorderContainer">Also, the CSS rules in your example:
#mondrian .dijitSplitter { border: 0; background: black !important } #mondrian .dijitSplitterH { height: 10px } #mondrian .dijitSplitterV { width: 10px } #mondrian .dijitSplitterThumb { display: none } #mondrian .dijitSplitterActive { background-color: blue } #mondrian SPAN { display: none } #mondrian:hover SPAN { display: inline }seem to have no effect as you don't have mondrian defined.