Dojo: Problem of having TabContainer inside ContentPane in IE8

In Dojo, the popular JavaScript library, we have ContentPane which allows us to put different widget into it, such as TabContainer, DataGrid, etc. They works fine in most browsers, but in IE 8, that could be a bit tricky.

Suppose we have the following code fragment:

<div id="testContentPane" 
     data-dojo-type="dijit/layout/ContentPane"" 
     style="height: 200px; overflow: auto; border: 5px blue solid;">

    testing 1 <br> testing 2 <br> testing 3 <br> 
    testing 4 <br> testing 5 <br> testing 6 <br><br>
    
    <div id="testTabContainer" 
         data-dojo-type="dijit/layout/TabContainer"
         style="width:80%; height:200px;" 
         disabled='disabled'>
         
        <div id="tabControl" 
             data-dojo-type="dijit/layout/ContentPane" 
             title="Tab" closable="false">
            Testing tab
        </div>
        
    </div>

</div>

The above code fragment is suppose to create a ContentPane and put a TabContainer into it:

Everything goes fine with IE 10, IE 9, Chrome, Firefox, but in IE 8, we have:

Look! The TabContainer just floating on top of the ContentPane. How to solve this issue?

Put CSS position: relative in the ContentPane and the issue will be fixed.

Why? Because in IE 8, the TabContainer is position:absolute. If ContentPane position CSS is not assigned, the TabContainer will leave out of it. By assigning position:relative to ContentPane, the position of TabContainer will be limited inside the ContentPane. Like this:

Quick notes on Dojo 1.8

Just a quick notes on dojo 1.8. For example, if I want to use the Color object in dojo. I will:

   var Color;

   require(["dojo/_base/Color"], function(c) {
      Color = c;
   });

Then I can use the variable Color after the initialization is done. Am I correct? Should it be used in another way? :-)

DOJO: Tab ordering in TabContainer

The tabContainer.getChildren( ) method returns a list of tab widget (ContentPane) in the container using the following way:

    dijit.findWidgets(tabContainer.containerNode)

However, if you did some drag and drop actions on the tab button list to rearrange the tab ordering, the tab sequence did not changed actually. To get a modified / correct ordered list, you may try to override the getChildren( ) method:

    myTabContainer.getChildren = function() {
        var list = this.tablist.getChildren();
        var rsltList = [];
        for (var idx=0; idx<list.length; idx++) {
           rsltList.push(list[idx].tab);
        }
        return rsltList;
    }

Noticed the underlined "tab" member variable in the code, you need to manually assign it when your tab page is created. Or you may find a way / method to get the Tab page object (ContentPane) via the Tab Button.

If you got any better method, please let me know :-)

Drag and Drop of Tab in Dojo

Check the following example for a hint to do drag and drop of tab page in Dojo: