Start Building Professional
Web Apps Today

tabbar- content autosizing problem

Hi!

I'm having problems when dynamically loaded content has different heights in different tabs: during switching, tabbar gets stuck on maximum height and won't adapt to smaller content anymore.

This is setup (called only on startup):

<table align="center" cellpadding="5" cellspacing="0">
<tr>
<td align="left" valign="top">
<div id="content" style="width:700px;">
</div>
<script language="javascript">
var tabbar=new dhtmlXTabBar("content");
tabbar.setImagePath("images/");
tabbar.enableAutoSize(true,true);    
tabbar.loadXML("<?=getUrl('tabXml.php')?>", function() {
for( id in tabbar.tabsId)
    tabbar.disableTab(id);
tabbar.enableTab('step1');
tabbar.setTabActive('step1');
tabbar.setOnSelectHandler(tabOnSelect);
}            
);
</script>        
</td>
<td valign="top" style="width:300px" nowrap>...</td>
</tr>
</table>

Tab definitions are loaded from separate file (tabXml.php) - first problem I've encountered is lack of callback for loadXML function; i simply added that.waitCall(); on the end of dhtmlXTabBar.prototype._parseXML function (loadXML has function as second argument but unfotunately it is not called after XML is loaded).

And this is source of tabOnSelect callback:

function tabOnSelect(step) {
    tabbar.forceLoad(step);
    window.scrollTo(0,0);        
}

I want to be sure that content is reloaded when user switches between tabs.

Working demo can be found at:

http://ira.avalon.hr/nrdb/index.php?pid=list

(Naruci = Order,Nastavak = Continue, Povratak = Back)

Problem can be seen when user gets to tab "Osobni podaci" and then gets back to "Parametriranje" - tab height isn't reduced to fit a content.

>>first problem I've encountered is lack of callback for loadXML function

as in all other latest component version loadXML supports second parameter - callback function
    tabbar.loadXML(function(id){
       //any after load code here
    });

>>when dynamically loaded content has different heights in different tabs: during switching, tabbar gets stuck on maximum height and won't adapt to smaller
basically this is default behavior, while in your case it may be not appropriate, in most cases adjustments to bigger tab size works better, because it adapt tabbar size only once and doesn't change tabbar size on active tab switching

You can disable behavior by next code modification
In dhtmlxTabbar.js

dhtmlXTabBar.prototype.adjustSize=function(){
            if ((!this._ahdj)&&(!this._awdj)) return;
            var flag=false;
            var x=0;
            var y=0;
            for (var id in this._content){

Marked code loop through all existing tabs, you can modify it to use only current active tab, and call in from OnSelect event handler

Yeah.. But how?

You can check sample at
          http://dhtmlx.com/docs/products/kb/index.php?s=normal&q=2148

That works for JS and XML, but what about HTML?

I wish I could use the XML and JS versions but the HTML is the only version that works for my page type.

Thanks again.

Please try to add class="dhx_tabcontent_sub_zone" to the container elements of tabs, this must resolve issue.