Start Building Professional
Web Apps Today


 
Categories Question details Back To List
Question  posted by Steve Schreiner on Sep 22, 2008 08:08
open dhtmlx forum
left tabs orientation

I have a tabbar set to left orientation so that my tab headers appear on the left. I want to increase the tab header width so that the tabs will show all of my text in each tab header. Do I have to do this using css?
Answer posted by dhtmlx support on Sep 23, 2008 02:39
The height of the tabs can be set in the 3rd paramater of the tabbar constructor:

tabbar=new dhtmlXTabBar("a_tabbar","left",height);

But in this case default images can not be used. You should create own tabs images.

Also you can place images instead of the text as the tabs content.


Answer posted by Steve Schreiner on Sep 23, 2008 05:05
Thanks, that did adjust the width of my left sided tabs, but how do I align the text within the tab vertically in the middle of each tab?  Also, if you run the code below, the outline of each tab only goes so far, and does not reach the edge of the container?

    ol_tabbar=new dhtmlXTabBar("tabBarDiv","left","80px");
    ol_tabbar.setImagePath("../../dhtmlxTabbar/imgs/");
    ol_tabbar.addTab("tab_general", "General", "30px");
    ol_tabbar.addTab("tab_details", "Details", "30px");
    ol_tabbar.addTab("tab_terms", "Terms", "30px");
    ol_tabbar.addTab("tab_printouts", "Print Outs", "30px");
    ol_tabbar.addTab("tab_tasks", "Tasks", "30px");
    ol_tabbar.addTab("tab_documents", "Documents", "30px");
    ol_tabbar.addTab("tab_rolessharing", "Roles Sharing", "30px");
    ol_tabbar.addTab("tab_history", "History", "30px");

    ol_tabbar.setContent("tab_general","orderLineGridDiv");
    ol_tabbar.enableScroll(false);
    ol_tabbar.setTabActive("tab_general", true);
Answer posted by dhtmlx support on Sep 23, 2008 10:01
>> but how do I align the text within the tab vertically in the middle of each tab?

You can use one of the following approaches to show text vertically: 

1) You can try to use some image as a tab:

    ol_tabbar.addTab("tab_details", "<img ...>", "100px");

2) or place container with width 1px and necessary letters with space between them inside it:

ol_tabbar.addTab("tab_details", "<div style='padding-left:3px;width:1px;'>D E T A I L E S</div>", "100px");   

The following approach will work only for IE:

ol_tabbar.addTab("tab_details", "<div style='word-wrap:break-word;width:1px;'>D E T A I L E S</div>", "100px"); 

>> Also, if you run the code below, the outline of each tab only goes so far, and does not reach the edge of the container?  

Tab's text is placed in the center of the tabs (dhtmlxtabbar.css):

.dhx_tab_element{
    font-family:Tahoma;
    font-size:8pt;
    text-align:center;
    cursor:pointer;
    position:absolute;
    overflow:hidden;
}


Answer posted by Steve Schreiner on Sep 23, 2008 13:10
please see attached image for further explanation of the problems I am having.  Thanks
Attachments (1)
tabs.jpg32.73 Kb
Answer posted by dhtmlx support on Sep 24, 2008 03:52
Tabs lines have width 38 px . So you should changed them. The ismages are in the folder codebase/imgs/left/: p_left.gif,p_right.gif,a_left.gif,a_right.gif

The position of the text can be changed by using html:

 ol_tabbar.addTab("tab_general", "<div style='padding-top:5px'>General</div>", "30px");