dhtmlxTabBar resizing issues with enableAutoSize

Suite and Optimus Suite 5
#1

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).




    TabBar Resize Test
 
 
  BODY {
    margin: 0;
    padding: 0;
  }
  .content {
    padding: 5px;
    width: 75%;
  }
 
 
 
 


  <div id=“db_tabbar”
       class=“dhtmlxTabBar”
       imgpath="…/imgs/"
       onInit=“tab_init()”
       skinColors="#F8F8F8,#D0D0D0,#F8F8F8">
   


     

        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.
     

   

   

     

        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.
     

   

   

     

        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.
     

   

 
 



#2

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 )