Start Building Professional
Web Apps Today


 
Categories Question details Back To List
Question  posted by Lonnie on Jun 04, 2007 18:53
open dhtmlx forum
dhtmlxTabBar resizing issues with enableAutoSize

I am having difficulties with auto sizing content areas with dhtmlxTabBar.  My real issue is happening with Internet Explorer version 7 and some 100% width tables placed in the content areas causing each click of a tab to expand the width of the content area by one pixel, however since the content of that example is quite complex (and I can't pinpoint the actual problem area), I've created a sample that should be pretty simple yet highlights an issue that could be related.

The following sample uses dhtmlXCommon.js from the latest dhtmlxGrid Pro distribution, and the rest of the CSS and JS are from recent patches uploaded to this knowledge base.  Once this is rendered, every time you click on a tab, the content area gets smaller and smaller until it is unusable.  This happens only in Internet Explorer.  Firefox seems to function properly (or as I would expect).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>TabBar Resize Test</title>
  <link rel="STYLESHEET" type="text/css" href="../css/dhtmlXTabBar_patch.css">
  <style>
  BODY {
    margin: 0;
    padding: 0;
  }
  .content {
    padding: 5px;
    width: 75%;
  }
  </style>
  <script type="text/javascript">
  //<![CDATA[
  function tab_init() {
    db_tabbar.enableAutoSize(true,true);
    db_tabbar.enableAutoReSize(true,true);
  }
  //]]>
  </script>
  <script src="../js/dhtmlXCommon_patch.js"></script>
  <script src="../js/dhtmlXTabbar_patch.js"></script>
</head>
<body>
  <div id="db_tabbar"
       class="dhtmlxTabBar"
       imgpath="../imgs/"
       onInit="tab_init()"
       skinColors="#F8F8F8,#D0D0D0,#F8F8F8">
    <div id="tab_1" name="Tab One" width="100%">
      <div class="content" style="background-color: yellow;">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In massa odio, rutrum ac, ultricies sed, commodo nec, ipsum. Etiam congue vulputate nulla. Curabitur tortor. Aenean quam sapien, lobortis pellentesque, sodales eu, tempus quis, purus. Pellentesque leo velit, dapibus quis, vulputate ac, faucibus vel, magna. Vestibulum tincidunt iaculis dui. Integer velit.
      </div>
    </div>
    <div id="tab_2" name="Tab Two" width="100%">
      <div class="content" style="background-color: lightblue;">
        Pellentesque dignissim felis at pede. Sed quis mi at pede commodo cursus. Integer ullamcorper semper leo. Sed consequat leo eu mauris ultricies auctor. Sed eget sem eget ipsum volutpat scelerisque. Nulla facilisi. Curabitur velit. Nullam quis sapien in ipsum auctor condimentum. Nam viverra tortor id velit. Cras ac lacus nec neque pretium posuere. Vivamus luctus.
      </div>
    </div>
    <div id="tab_3" name="Tab Three" width="100%">
      <div class="content" style="background-color: lightgreen;">
        Fusce consectetuer commodo nibh. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer placerat elit eu odio. Phasellus ut velit. In hac habitasse platea dictumst. Suspendisse tellus diam, placerat eu, tempus non, sollicitudin quis, pede. Nam semper, tortor at gravida rutrum, felis quam condimentum arcu, eu blandit ligula eros a neque.
      </div>
    </div>
  </div>
  <script src="../js/dhtmlXTabbar_start_patch.js"></script>
</body>
</html>

Answer posted on Jun 05, 2007 12:26
The problem caused by styles which you use, and I'm not sure is it a bug or not.
The situation is next

You have next style attached to content

  .content {
    padding: 5px;
    width: 75%;
  }

As result content always take 3/4 of tabbar size.
For example initial tabbar has 1000px width, content take 750px, on tab change, tabbar check content size ( autosize functionality ) and detects that maximal content size is 750px, so it resize tabbar to 750px, the content immideatly shrink to 562px, on next tab change the same repeats. Tabbar think about content as fixed size container, and your percent approach confuse logic.

Also I'm not sure what sense has using autosize and autoresize functionality in same time
first resize tabbar to its content
second resize tabbar to parent container on window resizing
basically they mutual exclusive ( they can work both in same time, but it can produce different size changes, based on which size functionality fired )


Answer posted by Inga (Support) on Dec 08, 2014 21:41

Not much can be said in addition to the reply above, but you also can check user interface library and php ajax tree and find out what we have probably missed in our explanation.