Start Building Professional
Web Apps Today

Tabbar Height issue

Hi,

I seem to have a problem in both FF 2.0.0.12 & IE7, where after applying 3 tabs and adding content to them (all from within HTML), the height of the tab appears to be the content of all 3 tabs, even though the height attribute has been set at 200 (much less than it should be!) :

<div id="a_tabbar" class="dhtmlxTabBar" imgpath="codebase/imgs/" style="width:200; height:200;" offset="3" tabstyle="green" skinColors="#FCFBFC,#F4F3EE" >

I'll try and explain that better!
Tab one has 2 form fields & a submit button
Tab two has numerous form fields & a submit button
Tab three has 4 form fields & a submit button

Yet the bottom of the box is no where near the submit button in any of the tabs

If I remove the content from tab 3 the box becomes smaller, and if only one tab has content in it, the box fits the content perfectly?

See sample here:
http://www.thewaterstaindoctor.co.nz/dev/index.html

Any suggestions will be greatly appreciated. :-)
Cheers
Andy

In case of FF you need to have
    <div id="a_tabbar" class="dhtmlxTabBar" imgpath="codebase/imgs/" style="width:200px; height:200px;"

because the height attribute without px ignored by browser and component uses real width of container on moment of initialization.

Hi,

That's great, thank you.  Rather obvious if I had actually thought about it!

A couple of other questions are:
1) Using just HTML, can I change the colour of the tab outline?  i.e. the colour of the lines that go completely round the whole tab?

2) I have seen a number of questions relating to auto resizing of the tab's dependant on the content they contain, but I cant figure out how to do this just by using HTML.  Or is there some syntax that needs changing in the .js files?

Thanks again for your help, great product & great support.  :-)
Cheers
Andy

>>Using just HTML, can I change the colour of the tab outline?  i.e. the colour of the lines that go completely round the whole tab?

This colors defined in CSS , so you can change necessary data in dhtmlxtabbar.css, or add css definition directly on your page
    <style>
       .dhx_tabbar_zone .dhx_tabcontent_zone{
      border-bottom:1px solid #91A7B4;
      border-left:1px solid #91A7B4;
      border-right:1px solid #91A7B4;
      border-top:0px solid #91A7B4; 
    }
    .dhx_tablist_line{
    background-color:#91A7B4;
    }
    </style>

>>I cant figure out how to do this just by using HTML.
It can't be done only by HTML , but it can still use initialization from HTML
    <div id="a_tabbar" class="dhtmlxTabBar" oninit="a_tabbar.enableAutoSize(true,true)" ...



oninit

Great, thank you once again.

Changing the css file worked perfectly, yet adding the oninit to the div container only shrunk the tabs to the size of the largest tab.  The smaller tabs with less forms/text in them still show the same size as the largest tab with the most forms/text in.

Can each tab change size dynamically when you click on it according to the content of each tab?

Thanks again... your help is REALLY appreciated.  :-)

Cheers
Andy

>>Can each tab change size dynamically when you click on it according to the content of each tab?
Unfortunately tabbar support only "resize-to-max-content" behavior.

Thats fair enough... thank you once again for your help, will certainly be using this again & hopefully some of your other cool products.

Thanks
Andy