Start Building Professional
Web Apps Today


 
Categories Question details Back To List
Question  posted by Ian Alexander on Aug 08, 2009 13:50
open dhtmlx forum
dhtmlxTabbar: autoreszing problem

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">
<html>
<head>
    <title>Test</title>
    <link rel="stylesheet" type="text/css" href="dhtmlxtabbar.css">
    <script src="dhtmlxcommon.js"></script>
    <script src="dhtmlxtabbar.js"></script>
</head>

<body style="height:100%;">


<table>
<tr>
<td>
<div id="a_tabbar" style="width:780px;height:680px;"/>
</td>
</tr>
</table>

<br>

<script>
tabbar=new dhtmlXTabBar("a_tabbar","right");
tabbar.setImagePath("imgs/");
tabbar.loadXML("tabs4.xml");
tabbar.setStyle("modern");
tabbar.enableAutoSize(true,true);
</script>

<br>
</body>
</html>


Many thanks in advance for any help.
Answer posted by Alex (support) on Aug 10, 2009 01:42
You can try to use onSelect handler and change the tabbar height depending on content size. The sample is attached
Attachments (1)
1203961860.zip61.71 Kb
Answer posted by Ian Alexander on Aug 10, 2009 06:59
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:

<script>
tabbar=new dhtmlXTabBar("a_tabbar","right");
tabbar.setImagePath("imgs/");
tabbar.loadXML("tabs4.xml");
tabbar.setStyle("modern");

tabbar.setOnSelectHandler(function(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;
});

tabbar.setTabActive("a1");
</script>

Is there something else I need to do?



Answer posted by Alex (support) on Aug 10, 2009 07:04
Please, provide the sample to recreate the issue.
Answer posted by Ian on Aug 10, 2009 07:41
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"?>
<tabbar hrefmode="ajax-html">
    <row>
        <tab id="a1" selected="1" width='70px' href="index.php">1</tab>
        <tab id="a2" width='60px' href="view.php?status=s">2</tab>
        <tab id="a3" width='60px' href="add.php">3</tab>
        <tab id="a4" width='60px' href="view.php?status=u">4</tab>
        <tab id="a5" width='70px' href="view.php?status=c">5</tab>
        <tab id="a6" width='70px' href="view.php?status=d">6</tab>
        <tab id="a7" width='80px' href="extras.php">7</tab>
        <tab id="a8" width='70px' href="charts.php">8</tab>
        <tab id="a9" width='60px' href="cards.php">9</tab>
        <tab id="a10" width='70px' href="donate.php">10</tab>
    </row>
</tabbar>

Answer posted by Alex (support) on Aug 11, 2009 01:53

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.

Answer posted by Ian on Aug 11, 2009 04:12
OK, so now I've got the following:

<script>
tabbar=new dhtmlXTabBar("a_tabbar","right");
tabbar.setImagePath("imgs/");
tabbar.loadXML("tabs4.xml");
tabbar.setStyle("modern");
tabbar.attachEvent("onTabContentLoaded",setSize);
tabbar.setOnSelectHandler(setSize);

tabbar.setOnSelectHandler(function(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;
});

</script>

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 ?

Answer posted by Alex (support) on Aug 11, 2009 05:08

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;
});



Answer posted by Ian on Aug 11, 2009 05:31
OK, I'm now using the following as suggested:

<script>
tabbar=new dhtmlXTabBar("a_tabbar","right");
tabbar.setImagePath("imgs/");
tabbar.loadXML("tabs4.xml");
tabbar.setStyle("modern");
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;
});
</script>

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

Answer posted by Alex (support) on Aug 11, 2009 05:37
Please, provide the complete demo to re-create the issue