dhtmlxTabbar: autoreszing problem

Suite and Optimus Suite 5
#1

I’m having the same problem that has previously been reported by another user, i.e.:



when dynamically loaded content has different heights in different tabs: during switching, tabbar gets stuck on maximum height and won’t adapt to smaller



I’ve read the answer that was given and followed the link to an attachment and tried to apply that but it’s still not working for me. Would really appreciate it if someone could explain in very simple terms the EXACT edits I need to make in order to get tab sizing to be based on individual tab content and NOT on the maximum size of tab content.



My code is:



<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
“http://www.w3.org/TR/html4/loose.dtd”>





    Test

    

    

    
























Many thanks in advance for any help.

#2

You can try to use onSelect handler and change the tabbar height depending on content size. The sample is attached
1203961860.zip (60.3 KB)

#3

Thanks for your reply.  I unpacked the attachment which works fine but when I copied the code into my own script the tab content now appears as no more than about 50 pixels high and I can see only half of Tab 1, the other 9 Tabs don’t even appear.  This is the code I now have:



Is there something else I need to do?



#4

Please, provide the sample to recreate the issue.

#5

I believe it must be due to the fact that I am using hrefmode “ajax-html” so am I right in assuming the OnSelectHamdler won’t work in this mode?  This is my xml loader file:

<?xml version="1.0"?>

   
        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
   


#6


In case of “ajax-html” data is loaded from external html. So it is necessary to set onTabContentLoaded handler too:


tabbar.attachEvent(“onTabContentLoaded”,setSize)
tabbar.setOnSelectHandler(setSize)


Where setSize is the same function as one that was used in the provided example.



#7

OK, so now I’ve got the following:



If I use the above none of the tabs autosize, they are all the same size but where the content is greater than the tab content area I get a scroll bar ?

#8


The code should be as follows


tabbar.attachEvent(“onTabContentLoaded”,setSize);
tabbar.setOnSelectHandler(setSize);

function setSize(id){
window.setTimeout(function(){
var box= tabbar._content[id];
if (!box) return;
box.style.height=“1px”;
var y=box.scrollHeight+10;
box.style.height=“100%”;
tabbar.setSize( tabbar._conZone.offsetWidth,y,true);
},1)
return true;
});





#9

OK, I’m now using the following as suggested:



And this gives a totally blank display, no tabs or content showing at all now?

#10

Please, provide the complete demo to re-create the issue