Start Building Professional
Web Apps Today


 
Categories Question details Back To List
Question  posted by Marco on Dec 12, 2008 02:51
open dhtmlx forum
Accordion within Tabbar .. attached to a Layout cell?

Hi,

I'm trying to have an Accordion as a Tab's content and the Tabbar attached to a cell of a "3L"Layout.
The problem is that the accordion doesn't work. It's shown but it's static, that is you can't open the panels.

Am I missing something?

Here is the code:

<body style="width: 100%; height: 100%; margin: 0px; overflow: hidden;">

<script>
    var dhxLayout = new dhtmlXLayoutObject(document.body, "3L");
        
    dhxLayout.cells("a").setWidth(200);
    dhxLayout.cells("a").fixSize(true, false);
    dhxLayout.cells("a").hideHeader();
    dhxLayout.cells("c").setHeight(100);
    dhxLayout.cells("b").setText("Home");
    dhxLayout.cells("c").setText("Filters");
    
    var dhxTabbar = dhxLayout.cells("a").attachTabbar();
    dhxTabbar.setImagePath("../../../dhtmlxTabbar/codebase/imgs/");
    
    dhxTabbar.addTab("a1","Reports","80px");
    dhxTabbar.addTab("a2","Favorites","80px");
    
    dhxTabbar.setContentHTML("a1","<div id='accordObj'></div>");
    dhxTabbar.setTabActive("a1");
    
    var dhxAccord = new dhtmlXAccordion("accordObj");
    
    dhxAccord.addItem("p1", "Accordion Panel A");
    dhxAccord.addItem("p2", "Accordion Panel B");
    dhxAccord.addItem("p3", "Accordion Panel C");
    dhxAccord.openItem("p1");    
    dhxAccord.setEffect(true);
</script>
</body>
Answer posted by Support on Dec 16, 2008 06:19
Hello,

Problem with dimension of <div id='accordObj'>

Add the following style:

        div#accordObj {
            width: 100%;
            height: 100%;
            position: relative;
        }