Start Building Professional
Web Apps Today

Problems with tab resizing and right border

Hi,
I am evaluating the feasibility of incorporating your tabs product into our web site. My initial impressions are very good but I have encountered the following problems:

1 when the browser is resized horizontally, the tabs are resized horizontally to fit the window but not vertically. The function to resize vertically must be available to be called because when I click on another tab, the vertical resizing occurs and the display is as I had expected after the resizing of the browser.

2 Sometimes the right border of the tab disappears. This is dependent on the width setting of the browser and only occurs occasionally, suggesting that there may be a rounding problem with an internal calculation. Although this only occurs at specific width settings, the cosmetic impact, when it occurs is major.

3 Do you release source files for the images? I like the 'modern' style but need to adjust the colours to suit my colour scheme.


I am using software version 1.2
with FireFox 2.0.0.13

The code I am using is as follows:
<?php } else {
//<!-- Tabs required -->
$document =& JFactory::getDocument();
$tabs_base = JURI::base() . 'libraries/dhtmlxTabbar/codebase/';
$document->addStyleSheet($tabs_base . 'dhtmlxtabbar.css');
$document->addScript($tabs_base . 'dhtmlxcommon.js');
$document->addScript($tabs_base . 'dhtmlxtabbar.js'); ?>
<div id="tab1Content" style="display:none;"><div style="margin:10px;"><?php echo $product_description ?></div></div>
<div id="tab2Content" style="display:none;"><div style="margin:10px;"><?php echo $product_recommendation ?></div></div>
<div style="margin:10px 3px;">
<div id="a_tabbar"></div>
<script>
    tabbar=new dhtmlXTabBar("a_tabbar");
    tabbar.setImagePath(<?php echo '"' . $tabs_base . 'imgs/"' ?>);
    tabbar.setMargin("10");
    tabbar.setOffset("20");
    tabbar.setStyle("modern");
    tabbar.enableAutoSize(true, true);
    tabbar.enableAutoReSize(true);
    tabbar.addTab("a1", "Product Details", "*");
    tabbar.addTab("a2", "Recommendations", "*");
    tabbar.setContent("a1", "tab1Content");
    tabbar.setContent("a2", "tab2Content");
    tabbar.setTabActive("a1");
</script>
</div>
<?php } ?>

>>3 Do you release source files for the images?
Unfortunately there is no "source" files of images available.

>>1 when the browser is resized horizontally
The problem caused by using both
    tabbar.enableAutoSize(true, true);
    tabbar.enableAutoReSize(true);

The first command says - accommodate size of tabbar to the size of inner content
The second command says - accommodate size of tabbar to the size of its parent container
Basically the both commands attempts to change the tabbar size, each in its own way. Which result was expected? Are tabbar must be resized with window resize, or it must be resized according to content size ?

To achieve the effect I wanted, I had to use both. enableAutoReSize(true) to ensure that the tab responds to browser width changes and enableAutoSize(true, true) to ensure that the tab size adjusts to fit the content. With the minor code change that I incorporated, they work together well and I get the effect that I wanted which is that when the browser width is changed, the width of the tab is changed and then the height is also adjusted, eliminating the need for white space when made wider and the scroll bar when made narrower. The only issue that I has was with IE where it was necessary to put the enableAutoSize(true, true) command after the tab content was loaded to ensure that the tab height was correctly adjusted when first displayed.