jimu/dijit/TabContainer3 - set different width to each tab

1126
4
Jump to solution
03-16-2017 01:31 PM
Alexwang
Occasional Contributor II

Hello, is there a way to set a different width to each tab? I tried to set the Style property for each tab and didn't work to me. Please see codes below. What is the correct way to do that if possible? Appreciate any help!

Tags (1)
0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Esteemed Contributor

Alex,

   I don't use the TabContainer3.js. Looking at the constructor function it will Not use the style property you are sending in. I don't see a good way to manually set the tab width. But one thing that looks promising is to add the average: true in the TabContainer3 constructor:

this.tabContainer = new TabContainer3({
  average: true,
  tabs: tabs
}, this.tabsNode);

View solution in original post

0 Kudos
4 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

Alex,

   I don't use the TabContainer3.js. Looking at the constructor function it will Not use the style property you are sending in. I don't see a good way to manually set the tab width. But one thing that looks promising is to add the average: true in the TabContainer3 constructor:

this.tabContainer = new TabContainer3({
  average: true,
  tabs: tabs
}, this.tabsNode);
0 Kudos
Alexwang
Occasional Contributor II

Thank you Robert. I was able to change the width of the container with average set to true. However, the title of each tab got truncated although it has enough space for the whole word. any idea of how to display the whole word? Thanks, again.

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

Alex,

   Like I mentioned I don't use it so I am not sure.

0 Kudos
Alexwang
Occasional Contributor II

Good enough! Thank you Robert. I will spend some extra time on that. 

0 Kudos