dhtmlXLayout header height?

Suite and Optimus Suite 5
#1

Is there any way to change the default dhtmlXLayout header height?

I have many sections in layout where all sections have headers and the default height of headers is large enough which covers most of the place on screen and looks weird.

The default height in my case is 27px and i am using custom dhmtlX skin.

#2

There is not a public method. However, you may try the following approach:

dhxLayout.skinParams.dhx_skyblue.cpanel_height = 15 /*new height*/ dhxLayout.forEachItem(function(item){ item.showHeader() })

also you need to redefine the following css:

[code]

table.dhtmlxLayoutPolyContainer_dhx_skyblue td.dhtmlxLayoutSinglePoly div.dhtmlxPolyInfoBar{
height:18px
}
table.dhtmlxLayoutPolyContainer_dhx_skyblue td.dhtmlxLayoutSinglePoly div.dhtmlxPolyInfoBar div.dhtmlxInfoBarLabel{
top:2px;
}
table.dhtmlxLayoutPolyContainer_dhx_skyblue td.dhtmlxLayoutSinglePoly div.dhtmlxPolyInfoBar div.dhtmlxInfoButtonShowHide_hor{
top:2px;
}
table.dhtmlxLayoutPolyContainer_dhx_skyblue td.dhtmlxLayoutSinglePoly div.dhtmlxPolyInfoBar div.dhtmlxInfoButtonShowHide_ver{
top:2px;
}
[/code]

#3

Thanks Alexandra, it really worked. :slight_smile:

Can we change header height of dhtmlXTabbar in a same way? I feel that it requires changes in tab images also, is it?

I also want to make round corners for frames in dhtmlXLayout using something similar to dhtmlXWindow css:

.dhtmlx_window_active, .dhtmlx_wins_body_outer, .dhtmlx_wins_body_inner { -webkit-border-radius: 9px; -moz-border-radius: 9px; -o-border-radius: 9px; border-radius: 9px; }

Can you please provide exact css for the required change?

#4

The height of tabbar height can be define in the 3rd parameter of the tabbar constructor:

var tabbar=new dhtmlXTabBar(“container”,“top”,18);

However, the height for the “dhx_skyblue” and “dhx_web” hardcoded and can not be changed.

This is the sample with tabbar skins:

dhtmlxTabbar/samples/04_styling/01_skins.html

Layout css:

table.dhtmlxLayoutPolyContainer_dhx_skyblue td.dhtmlxLayoutSinglePoly div.dhxcont_global_content_area - content zone

table.dhtmlxLayoutPolyContainer_dhx_skyblue td.dhtmlxLayoutSinglePoly div.dhtmlxPolyInfoBar - cell header

#5

Thanks Alexendar for css help.

For tabbar height, i am using

var tabbar = dhxLayout.cells(“a”).attachTabbar();

Is there any way in this case for setting header height?

#6

When Tabbar is attached into container (an item of layout, window, accordion or tabbar), it gets the same skin as its parent and the tab height is also fixed in this case - 20px. There is not possibility to set tab height in this case.