Make dijit TabContainer tabs same size and evenly stretch them to the size of the tab container

Question

Can you please tell me how to make the tabs same size and evenly stretch them to the size of the TabContainer? Picture below shows the size of the tabs are different and they are left aligned. But i want to them to be same size which should be 1/3 of the tab container.

var tc = new TabContainer({
    style: "height: 100px; width: 100%;"
});

var cpOrg = new ContentPane({
     title: "Mississippi",
     content: "Mississippi"
});
tc.addChild(cpOrg);

var cpShared = new ContentPane({
     title: "Utah",
     content: "Utah"
});
tc.addChild(cpShared);

var cpPrivate = new ContentPane({
     title: "New York",
     content: "New York"
});
tc.addChild(cpPrivate);

tc.startup();

score 1 · Accepted Answer · answered Sep 07 '16 at 09:46

It's Simple just locate the class and apply style to it.

To do it dynamicly whatever number of tabs you have :

Calculate The number of childs
Calculate the width of the tabContainer
Apply to all child the calculated whidth ( whidth container / number of childs - other stuff)
Create window resize change event to make the width dynamic

Here is a solution :

require([
 "dojo/query",
  "dojo/on",
 "dojo/dom-style",
  "dijit/layout/TabContainer", 
  "dijit/layout/ContentPane",
  "dojo/domReady!"
], function(query,On,domStyle,TabContainer,ContentPane) {
  
  var tc = new TabContainer({
    style: "height: 100px; width: 100%;"
  },"tabContainer");

  var cpOrg = new ContentPane({
       title: "Mississippi",
       content: "Mississippi"
  });
  
  tc.addChild(cpOrg);
 
  var cpShared = new ContentPane({
       title: "Utah",
       content: "Utah"
  });
  tc.addChild(cpShared);

  var cpPrivate = new ContentPane({
       title: "New York",
       content: "New York"
  });
  
  tc.addChild(cpPrivate);
  tc.startup();
 
  changeTabWidth();
  
  function changeTabWidth(){
    // get the number of child of tabContainer
    var number_of_child = tc.containerNode.childElementCount;
    
    // calculate width of tabContainer and divide by number of child then 
    // every tab has 6px left and right padding + 1px border right so 
    // size must be 6+6+3-1 for the last tab = "14" that's why we remove 14 above from the width sum
    var width = (domStyle.get(tc.containerNode,"width")/number_of_child) - 14;
    
    query(".dijitTabInner.dijitTabContent.dijitTab").forEach(function(element){
      domStyle.set(element, {
        width: width+"px"
      });
    });
  }
  
  // event to change width after window size changed 
  On(window,"resize",function(){
   changeTabWidth();
  })
  
});

<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 id="tabContainer"></div>
</div>

Fiddle If you want :Fiddle

Make dijit TabContainer tabs same size and evenly stretch them to the size of the tab container

1 Answers1