Start Building Professional
Web Apps Today


 
Categories Question details Back To List
Question  posted by Vibhav Agrawal on Oct 26, 2009 07:40
open dhtmlx forum
Div tag size for tabbar component

Hi,

I am having a page having 3 portions (header, content & footer).
The three portions are denoted by the 3 div tags in the page, each having a portion.

For the content div tag, i have to specify the hardcoded size (as follows):
<div id="mainTemplateBody" style="position: relative; top: 0px; left: 0px; height:500px; width: 1320px; " >

If i specify the height & width in relative % of screen (like 90%), it doesnot takes the size and creates the div tag of zero height & width.
<div id="mainTemplateBody" style="position: relative; top: 0px; left: 0px; height:90%; width: 90%; " >
Due to this zero size, whenever i try to create a dhtmlxWindow OR dhtmlxLayout component, it throws a javascript error.


Could you please provide an example in which i can specify the page with 3 div tags, having hardcoded height of top & bottom (header & footer) components, and the middle component having the dhtmlx components should take the remaining portion automatically.

Thanks,
Vibhav Agrawal
Answer posted by Alex (support) on Oct 26, 2009 09:38

Hello, 

you can place the 3E layout into the tab. The top and bottom cells of the layout can have fixed height, another - flexible (depending of tabbar size).

var layout = tabbar.cells(tabId).attachLayout("3E");

layout.cells("a").setHeight("100");
layout.cells("c").setHeight("100");
layout.cells("a").hideHeader(true);
layout.cells("b").hideHeader(true);
layout.cells("c").hideHeader(true);

http://www.dhtmlx.com/docs/products/dhtmlxTabbar/samples/05_components/03_layout_inside.html


Answer posted by Vibhav Agrawal on Oct 26, 2009 09:50
Thanks Alex for the quick response.

I would like to tell u that the top & bottom components are not the dhtmlx component. They are generic javascript/html components which cannot be moved inside dhtmlx component.

Secondly, the tabbar (or any dhtmlx component) exists inside the second tab only.
Sample code:
<div id="header" style="height:100px; width: 100%; " >
<div id="mainTemplateBody" style="position: relative; top: 0px; left: 0px; height:500px; width: 1320px; " >
<div id="header" style="height:50px; width: 100%; " >

and this mainTemplateBody div tag contains the dhtmlx component.

If i remove the hardcoded width & height from the above code, it is resulting in a UI with middle div tag (mainTemplateBody) size as 0 (zero). Due to which rendering a layout component in it throws a javascript error.

Could you please let me know any example with such scenario.

Thanks,

Vibhav Agrawal

Answer posted by Alex (support) on Oct 27, 2009 03:38

The example of the tabbar with divs inside (html intialization):

<div id="a_tabbar" class="dhtmlxTabBar" imgpath="../../codebase/imgs/" style="width:390px; height:390px;">
    <div id="a1" name="Tab 2" width="100px">
        <div style="height:100%; width: 100%;">
            <div id="header" style="height:100px; width: 100%;" >header </div>
            <div id="mainTemplateBody" style="position: relative;height:200px;width: 100%;" >body</div>
            <div id="footer" style="height:50px; width: 100%;" >footer</div>
        </div>
    </div>

    <div id="a2" name="Tab 2" width="100px">
    </div>
    <div id="a3" name="Tab 3" width="100px">
    </div>
</div>

The sample is dhtmlxTabbar/samples/01_initialization/04_init_from_html.html