Dojo TabContainer not styling

2020-04-27 10:33发布

问题:

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>

回答1:

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 :) ).



回答2:

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.