Hi,
I have a small project I am doing, and am using Dojo for it. At the moment I can't get everything to load properly. I am trying to use the Tundra theme.
Essentially, the issue is that the TabContainer is missing tabs, has serif fonts instead of sans-serif, and shows all ContentPanes inside it instead of hiding ones in non-active tabs. The serif issue also applies to all other Dijit elements I try to create, however Dijit form elements seem to work a bit better (apart from font being incorrect, it has correct styling, and validation and other fancy stuff works fine).
The same issue appears when using the other Dijit themes, however the TabContainer border colour changes with each different theme which leads me to believe the Dijit theme may be loading correctly. Dojo seems to be correctly creating the Dijit elements though, looking at the Firebug output further below.
Complete copies of Dojo 1.3.2 dojo, dijit and dojox directories exist in js/dojo. All linked stylesheets and scripts are initially loading and the paths to them are correct (I've tested to confirm that with alert boxes in js and body colour changing in css).
index.html
<!DOCTYPE HTML>
<html>
<head>
<link href="js/dojo/dijit/themes/tundra/tundra.css" rel="stylesheet">
<script src="js/dojo/dojo/dojo.js"></script>
<script src="js/script.js"></script>
</head>
<body class="tundra">
<div id="xmldiv">
</div>
<script language="javascript">xmlEnableDiv('xmldiv');</script>
</body>
</html>
js/script.js
function xmlEnableDiv(div) {
dojo.require("dijit.layout.TabContainer");
dojo.require("dijit.layout.ContentPane");
var tc = new dijit.layout.TabContainer({
}, div);
var cp1 = new dijit.layout.ContentPane({
id: "xmleditor",
title: "Editor",
content: "This is where the editor will actually go"
});
tc.addChild(cp1);
var cp2 = new dijit.layout.ContentPane({
id: "xmltext",
title: "Source",
content: "This is where the source will actually go"
});
tc.addChild(cp2);
}
Checking Firebug, I see the following (which to my eyes looks like it should):
<body class="tundra">
<div id="xmldiv" class="dijitTabContainer dijitContainer dijitTabContainerTop dijitLayoutContainer" widgetid="xmldiv">
<div id="xmldiv_tablist" class="dijitTabContainerTop-tabs" dojoattachevent="onkeypress:onkeypress" wairole="tablist" role="tablist" widgetid="xmldiv_tablist"/>
<div class="dijitTabSpacer dijitTabContainerTop-spacer" dojoattachpoint="tablistSpacer"/>
<div class="dijitTabPaneWrapper dijitTabContainerTop-container" dojoattachpoint="containerNode" role="tabpanel">
<div id="xmleditor" class="dijitContentPane" title="" widgetid="xmleditor" role="group">This is where the editor will actually go</div>
<div id="xmltext" class="dijitContentPane" title="" widgetid="xmltext" role="group">This is where the source will actually go</div>
</div>
</div>
<script language="javascript">
xmlEnableDiv('xmldiv');
</script>
</body>
The actual output (in Firefox and Chrome) is a box (the TabContainer) with a themed border. There are no tabs on the TabContainer, and both of the ContentPanes are visible at the same time (both with serif fonts).
The things I've tried without avail:
- Doing a dojo.parser.parse() at the end of my init function
- Trying other Dijits. They act similarly in that they seem to partially load. Every Dijit has serif fonts instead of sans-serif, but form elements and dialog are both showing correctly apart from the incorrect font
Thanks in advance, this is driving me nuts.