Dijit Tabcontainer inside a custom widget-Tablist width runs too long

Question

I have a templated custom widget that inherits from dijit.layout._LayoutWidget, dijit._Container, and dijit._Templated which gives my widget native Widget support for resizing, etc. All I need is a TabContainer, which is sized to the size of widget. Here is my widget.

<div dojoAttachPoint="containerNode">
    <div dojoType="dijit.layout.TabContainer" tabPosition="top" style="width:100%;height:100%" >
    <div dojoType="dijit.layout.ContentPane" title="tab" selected="true">
    hello
    </div>
</div>
</div>

Everything looks fine but I get a weird TabList. This is what I get!

I looked into the problem. All the pieces of the widget and TabContainer have the correct width and height values. Only The tablist has a loooong width (50'000 something pixels wide): I have read about similar issues such as this one: http://bugs.dojotoolkit.org/ticket/10495, but in my case all the elements have correct width and length. I have no idea how does tablist get this long width.

I have also tried many ways of adding and removing style="width:100%;height:100;" for the parent container and its parents. But none of the configurations fixed the problem.

Is there a way to fix this problem?

Just to mention that the problem exists with both tabPosition="top" and "bottom". But it looks prefectly fine with "left" and "right". — nvd_ai, Jul 13 '11 at 23:54

score 3 · Answer 1 · answered Sep 23 '11 at 04:16

Just in case someone is looking for the solution, I had the same problem, and came to this question. Though I looked at the bug reports, it didn't apply in my case, I was not embedding tabcontainer inside table or setting doLayout to false. I tried setting tabcontroller but that didn't work either. Finally after debuggin, turns out you have to provide 'resize' method in your widget and resize tabcontainer inside it in the following way

widgetTemplate =  '... ' + //Our tabcontainer declaration
'<div dojoAttachPoint="containerNode">' +
'<div dojoAttachPoint="widgetTab" dojoType="dijit.layout.TabContainer"' + 'style="width:100%;height:100%" >' +
'<div dojoType="dijit.layout.ContentPane" title="tab" selected="true">hello</div></div></div>' + 
'...' //Rest Of template declaration

//Since we are embedding widget inside template we need _WidgetsInTemplateMixin
dojo.declare("MyWidget", [dijit._Widget, dijit._TemplatedMixin,dijit._WidgetsInTemplateMixin], {
templateString: widgetTemplate,
.... //Rest of functions
resize: function(){
this.containerNode.widgetTab.resize() //Resize tabcontainer 
}

});

Hope this helps

This is exactly what I was looking for! thanks for sharing! – nachoargentina May 20 '20 at 12:56 — nachoargentina, May 20 '20 at 12:56

score 1 · Answer 2 · answered Aug 23 '11 at 15:04

1

Try to add attribute to your TabContainer:

<div dojoType="dijit.layout.TabContainer" controllerWidget="dijit.layout.TabController" ... >

http://bugs.dojotoolkit.org/ticket/10113#comment:11

answered Aug 23 '11 at 15:04

Mikhail Fiadosenka

311
4
8

I had a problem that div.nowrapTabStrip had with only 200px; and code below worked perfect: tabContainer = new TabContainer({ controllerWidget: TabController, style: "height: 75%; width: 100%;"}) – keemor Oct 05 '16 at 20:17

score 0 · Answer 3 · answered Apr 25 '13 at 12:32

Just rewrite your css like this:

div[class="dijitTabListWrapper dijitTabContainerTopNone dijitAlignClient"]{
  height: 30px !important;
}

@-moz-document url-prefix() {
  div[class="dijitTabListWrapper dijitTabContainerTopNone dijitAlignClient"]{
    height: 31px !important;
  }
}

score 0 · Answer 4 · answered Jun 06 '16 at 13:04

0

If you want to remove the first one : "useMenu : false" If you want to remove the second and the third : "useSlider : false"

answered Jun 06 '16 at 13:04

Yann Z

1

Dijit Tabcontainer inside a custom widget-Tablist width runs too long

4 Answers4

Linked