CODEWITHSUNDEEP
javascriptdojodijit.layout
pvitt
pvitt

Reputation: 1075

change label color of one tab in a series of tabs in dijit layout tabcontainer

I'm trying to change the label color of a tab in a dijit/layout/tabcontainer to distinguish it from other tabs, but I'm not having any luck.

I've got this HTML:

<div data-dojo-type="dijit/layout/TabContainer" data-dojo-props="region:'center'" id="tc" >
                <div data-dojo-type="dijit/layout/ContentPane" title="Start" id="Start" class="TabBackground"></div>
        <!--bunch more tabs here-->

                <div data-dojo-type="dijit/layout/ContentPane" title="Attachments" id="Attachments" class="TabProp1Fund"></div>

                <div data-dojo-type="dijit/layout/ContentPane" title="Finish" id="Finish" class="TabBackground"></div>
            </div>

Trying css:

.TabProp1Fund .dijitTab .tabLabel{  //saw this style when inspecting element
color:orange !important;
}

also tried:
.TabProp1Fund .tabLabel{
color:orange !important;
}

Trying javascript:

var TabAttachments = dojo.byId("Attachments");
                        TabAttachments.dijitTab.tabLabel.style.color="green";//dijitTab and tabLabel are undefined

any ideas what I'm missing ? I'd actually prefer to change the tab color, but I dont know if there is a property for this?

Thanks

Upvotes: 1

Views: 264

Answers (1)

Bourbia Brahim
Bourbia Brahim

Reputation: 14712

This is because the class is not replicated in the generated Tab menus , it remains only in the content pane div , but the you can do it dynamically by searching (in ready after dom load ) using the class for your content pane , get it's ID and apply the color , class or whatever you want to a "tc_tablist_"+contentePaneID in order to apply this to all content pane having your specified class . (using dojo/dom-style)

See below working snippet :

Below I applied color directly to dom , but it's better to create class , and add it using "dojo/dom-class" domClass.add("someNode", "newClass"); 

require([
  "dojo/query",
  "dojo/on",
  "dojo/dom",
  "dojo/dom-style",
  "dojo/ready",
  "dijit/layout/TabContainer",
  "dijit/layout/ContentPane",
  "dojo/domReady!"
], function(query, On, dom, domStyle, ready, TabContainer, ContentPane) {
  ready(function() {
    query(".TabProp1Fund").forEach(function(element) {
      console.log(element.id)
      var textNode = dom.byId("tc_tablist_"+element.id);
      console.log(textNode)
      if (!textNode) return;
      domStyle.set(textNode, {
        color: "orange"
      });
    });
  });
});
<script>
  dojoConfig = {
    async: true,
    parseOnLoad: true
  }
</script>

<script src="https://ajax.googleapis.com/ajax/libs/dojo/1.11.2/dojo/dojo.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/dojo/1.10.0/dijit/themes/claro/claro.css" rel="stylesheet" />
<div class="claro">
  <div data-dojo-type="dijit/layout/TabContainer" data-dojo-props="region:'center'" id="tc">
    <div data-dojo-type="dijit/layout/ContentPane" title="Start" id="Start" class="TabBackground"></div>
    <!--bunch more tabs here-->

    <div data-dojo-type="dijit/layout/ContentPane" title="Attachments" id="Attachments" class="TabProp1Fund"></div>

    <div data-dojo-type="dijit/layout/ContentPane" title="Finish" id="Finish" class="TabBackground"></div>
  
  <div data-dojo-type="dijit/layout/ContentPane" title="Another orange" id="another" class="TabProp1Fund"></div>
 </div> 
</div>

Upvotes: 1

Related Questions