{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 倾城 Initia 的问题《Dojo TabContainer not styling》','https://www.manongdao.com/q-1293388.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
For some reason the style elements aren't getting applied to the TabContainer. The tab titles are showing up as plain black-on-white text jammed right next to each other.
<script src="http://localhost/dojo/1.9.1/dojo/dojo.js" data-dojo-config="async:true,parseOnLoad:true"></script>
<link href="http://localhost/dojo/1.9.1/dojo/resources/dojo.css" type="text/css" rel="stylesheet" />
<link href="http://localhost/dojo/1.9.1/dijit/themes/claro/claro.css" type="text/css" rel="stylesheet" />
<link href="http://localhost/dojo/1.9.1/dojox/grid/enhanced/resources/claro/EnhancedGrid.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="mainUIContainer" data-dojo-type="dijit/layout/TabContainer" region='center' style="width: 100%; height: 100%;">
<div id="numbersGridTab" data-dojo-type="dijit/layout/ContentPane" style="width: 100%; height: 100%;" title="Grid">
<div id="numbersGridHolder" style="width: 900px; height: 400px;"></div>
</div>
<div id="textBlobTab" data-dojo-type="dijit/layout/ContentPane" style="width: 100%; height: 100%;" title="crap">
lorem ipsum dolor
</div>
</div>
<script>
require([
"dijit/layout/ContentPane",
"dijit/layout/TabContainer",
"dojo/domReady!"
], function(){
makeGrid();
});
</script>
I believe the issue here is that, in order to use an existing dojo theme like
claro, you need to add a class to the body tag<body class="claro">@Andrew: This did the trick!! Confirmed with Dojo 1.9.2 (Tundra to be specific :) ).
You could use Chrome's Ctrl+Shift+I panel to browse the generated DOM of your page and find the tag you want to style. If you think there is JavaScript overriding your style, create a new Javascript to be executed after the others are executed, and use it to set the styles instead. As most design-oriented developers, I advise you use jQuery if you need to make use of dynamic styling extensively.