dijit.layout.bordercontainer hides all inner contents
https://stackoverflow.com/questions/10419050
-
05-06-2021 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
I had a hard time understanding the new version 1.7.1 dojo toolkit and returned to the 1.5 version. I am trying to include the bordercontainer to layout my controls to match one of the demos but the bordercontainer keeps messing things up.
http://download.dojotoolkit.org/release-1.6.1/dojo-release-1.6.1/dijit/themes/themeTester.html
I am trying to recreate the following and I got the menu part created and doing the accordianContainer but if I include the bordercontainer then all that appears is a line that looks like the container consuming everthing and I do not see the internal components including the menu. Any ideas appreciated.
<body class="claro">
<form id="form1" runat="server">
<asp:ScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ScriptManager>
<div dojoType="dijit.Menu" id="submenu1" data-dojo-props='contextMenuForWindow:true, style:"display:none"' style="display: none;">
<div dojoType="dijit.MenuItem">Enabled Item</div>
<div dojoType="dijit.MenuItem" data-dojo-props="disabled:true">Disabled Item</div>
<div dojoType="dijit.MenuSeparator"></div>
<div dojoType="dijit.MenuItem" data-dojo-props="iconClass:'dijitIconCut'">Cut</div>
<div dojoType="dijit.MenuItem" data-dojo-props="iconClass:'dijitIconCopy'">Copy</div>
<div dojoType="dijit.MenuItem" data-dojo-props="iconClass:'dijitIconPaste'">Paste</div>
<div dojoType="dijit.MenuSeparator"></div>
<div dojoType="dijit.PopupMenuItem">
<span>Enabled Submenu</span>
<div dojoType="dijit.Menu" id="submenu2">
<div dojoType="dijit.MenuItem">Submenu Item One</div>
<div dojoType="dijit.MenuItem">Submenu Item Two</div>
<div dojoType="dijit.PopupMenuItem">
<span>Deeper Submenu</span>
<div dojoType="dijit.Menu" id="submenu4">
<div dojoType="dijit.MenuItem">Sub-sub-menu Item One</div>
<div dojoType="dijit.MenuItem">Sub-sub-menu Item Two</div>
</div>
</div>
</div>
</div>
<div dojoType="dijit.PopupMenuItem" data-dojo-props="disabled:true">
<span>Disabled Submenu</span>
<div dojoType="dijit.Menu" id="submenu3" style="display: none;">
<div dojoType="dijit.MenuItem">Submenu Item One</div>
<div dojoType="dijit.MenuItem">Submenu Item Two</div>
</div>
</div>
<div dojoType="dijit.PopupMenuItem">
<span>Different popup</span>
<div dojoType="dijit.ColorPalette"></div>
</div>
<div dojoType="dijit.PopupMenuItem">
<span>Different popup</span>
<div dojoType="dijit.Calendar"></div>
</div>
</div>
<div id="main" dojoType="dijit.layout.BorderContainer" design="sidebar">
<div id="header" dojoType="dijit.MenuBar" region="top">
<div dojoType="dijit.PopupMenuBarItem" id="edit">
<span>Edit</span>
<div dojoType="dijit.Menu" id="editMenu">
<div dojoType="dijit.Menu" id="Div1">
<div dojoType="dijit.MenuItem" id="cut" iconClass="dijitIconCut"
onClick="console.log('not actually cutting anything, just a test!')">Cut</div>
<div dojoType="dijit.MenuItem" id="copy" iconClass="dijitIconCopy"
onClick="console.log('not actually copying anything, just a test!')">Copy</div>
<div dojoType="dijit.MenuItem" id="paste" iconClass="dijitIconPaste"
onClick="console.log('not actually pasting anything, just a test!')">Paste</div>
<div dojoType="dijit.MenuSeparator" id="separator"></div>
<div dojoType="dijit.MenuItem" id="undo" iconClass="dijitIconUndo">Undo</div>
</div>
</div>
</div>
<div dojoType="dijit.PopupMenuBarItem" id="view">
<span>View</span>
<div dojoType="dijit.Menu" id="viewMenu">
<div dojoType="dijit.MenuItem">Normal</div>
<div dojoType="dijit.MenuItem">Outline</div>
</div>
<div dojoType="dijit.PopupMenuItem">
<span>Zoom</span>
<div dojoType="dijit.Menu" id="zoomMenu">
<div dojoType="dijit.MenuItem">50%</div>
<div dojoType="dijit.MenuItem">75%</div>
<div dojoType="dijit.MenuItem">100%</div>
<div dojoType="dijit.MenuItem">150%</div>
<div dojoType="dijit.MenuItem">200%</div>
</div>
</div>
</div>
<div dojoType="dijit.PopupMenuBarItem" id="themes">
<span>Themes</span>
<div dojoType="dijit.Menu" id="themeMenu"></div>
</div>
<div dojoType="dijit.PopupMenuBarItem" id="dialogs">
<span>Dialogs</span>
<div dojoType="dijit.Menu" id="dialogMenu">
<div dojoType="dijit.MenuItem" data-dojo-props="onClick: showDialog">slow loading</div>
<div dojoType="dijit.MenuItem" data-dojo-props="onClick: showDialogAb">action bar</div>
</div>
</div>
<div dojoType="dijit.PopupMenuBarItem" id="inputPadding">
<span>TextBox Padding</span>
<div dojoType="dijit.Menu" id="inputPaddingMenu">
<div dojoType="dijit.CheckedMenuItem" data-dojo-props="onClick:setTextBoxPadding, checked:true">theme default</div>
<div dojoType="dijit.CheckedMenuItem" data-dojo-props="onClick:setTextBoxPadding">0px</div>
<div dojoType="dijit.CheckedMenuItem" data-dojo-props="onClick:setTextBoxPadding">1px</div>
<div dojoType="dijit.CheckedMenuItem" data-dojo-props="onClick:setTextBoxPadding">2px</div>
<div dojoType="dijit.CheckedMenuItem" data-dojo-props="onClick:setTextBoxPadding">3px</div>
<div dojoType="dijit.CheckedMenuItem" data-dojo-props="onClick:setTextBoxPadding">4px</div>
<div dojoType="dijit.CheckedMenuItem" data-dojo-props="onClick:setTextBoxPadding">5px</div>
</div>
</div>
<div dojoType="dijit.PopupMenuBarItem" id="help">
<span>Help</span>
<div dojoType="dijit.Menu" id="helpMenu">
<div dojoType="dijit.MenuItem">Help Topics</div>
<div dojoType="dijit.MenuItem">About Dijit</div>
</div>
</div>
<div dojoType="dijit.PopupMenuBarItem" data-dojo-props="disabled:true">
<span>Disabled</span>
<div dojoType="dijit.Menu">
<div dojoType="dijit.MenuItem">You should not see this</div>
</div>
</div>
</div>
<div dojoType="dijit.layout.AccordionContainer"minSize="20" style="width: 300px;" id="leftAccordion" region="left" splitter="true">
<div dojoType="dijit.layout.ContentPane" title="Popups and Alerts"><div style="padding:8px">
</div>
</div><!-- end AccordionContainer -->
</div>
</div>
</form>
Solution
It can be tricky to get BorderContainer to render. Usually I find that it's a sizing issue, and that it's completely the wrong size.
I usually try:
- Use your browser development tools to inspect the corresponding to the BorderContainer, and find out what its actual size is. It'll usually be something like a tab called 'Metrics' which indicates the exact position and size of your container, and what's going on with its padding and margin. There's a chance it's 0px high.
- In your HTML, explicitly set the width and height of your BorderContainer div to something static and hardcoded (e.g. style="width: 300px; height: 300px") and see what happens.
OTHER TIPS
I suppose, in addition to Royston solution, what worked for me is just doing this:
dijit.byId("main").resize();
(where the "main" is the id of the BorderContainer).
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
