My company is evaluating DHTMLX to see if it will serve our purposes for an upcoming project. I am using DHTMLX to build a prototype version of our application.
I am running into trouble trying to get scroll bars to appear in the correct spot.
I am using a layout object attached to document.body to create 2 panes. in the bottom pane I am attaching an Accordion object to display different sections of data. The accordion is attached and created using layout.cells(‘b’).attachAccordion().
I am able to get scroll bars to appear for each of the accordion item’s contents, but if multiple accordion items are open, I cannot scroll within the ‘b’ layout cell.
Any clue as to what is missing or what needs to be done to get scroll bars to show up?
Test code below.
[code]
html,body{width:100%;height:100%;margin:0px;padding:0px;overflow:auto;} .accord{overflow:auto;height:100%;width:100%;} var layout, editor; function loadDisplay()
{
var pos = 0;
var accht = 800;
layout = new dhtmlXLayoutObject(document.body, "2e");
layout.cells('a').setHeight(100);
layout.cells('a').fixSize(true, true);
layout.cells('a').setText("");
layout.cells('a').hideHeader();
layout.cells('a').attachObject("fcetopmenu");
toolbar = layout.cells('a').attachToolbar();
toolbar.addSpacer("");
toolbar.addButton("Quit",pos++,"Quit");
layout.cells('b').setText("");
layout.cells('b').hideHeader();
editor = layout.cells('b').attachAccordion();
editor.enableMultiMode(true);
editor.addItem("a0", "Facility");
editor.cells("a0").setHeight(600);
editor.cells("a0").attachObject("location");
editor.addItem("a1", "Additional location");
editor.cells("a1").setHeight(600);
editor.cells("a1").attachObject("additionallocation");
editor.cells("a1").close();
editor.setSizes();
}
</script>
</head>
<body onload="loadDisplay();">
<div id="fcetopmenu">
Some Stuff
</div>
<div id="editor" class="accord">
<div id="location" class="accord">
First Accordion view.
<br/><br/>
Data
<br/>
Data
<br/>
Basic Location Data
<br/><br/>
<table>
<tr>
<td align="center">Name</td>
<td align="center">CCD</td>
<td align="center">POLDIV</td>
<td align="center">DSTR</td>
<td align="center">URB</td>
<td align="center">IND</td>
<td align="center">PSD</td>
</tr>
<tr>
<td><input type="text" name="Name" size="60"/></td>
<td><input type="text" name="CCD" size="3"/></td>
<td><input type="text" name="POLDIV" size="10"/></td>
<td><input type="text" name="DSTR" size="5"/></td>
<td><input type="text" name="URB" size="30"/></td>
<td><input type="text" name="IND" size="5"/></td>
<td><input type="text" name="PSD" size="5" /></td>
</tr>
</table>
<br/><br/>
<table>
<tr>
<td align="right">GLAT</td>
<td><input type="text" name="GLAT"/></td>
<td align="right">GLON</td>
<td><input type="text" name="GLON"/></td>
<td align="right">HGA</td>
<td><input type="text" name="HGA"/></td>
<td align="right">GELV</td>
<td><input type="text" name="GELV"/></td>
<td align="right">GSEP</td>
<td><input type="text" name="GSEP"/></td>
<td align="right">VGA</td>
<td><input type="text" name="VGA"/></td>
</tr>
<tr>
<td align="right">DERIV</td>
<td><input type="text" name="DERIV"/></td>
<td align="right">BASIS</td>
<td><input type="text" name="BASIS"/></td>
<td align="right">SRC</td>
<td><input type="text" name="SRC"/></td>
<td align="right">GDATE</td>
<td><input type="text" name="GDATE"/></td>
</tr>
<tr>
<td align="right">RADIUS</td>
<td><input type="text" name="RADIUS"/></td>
<td align="right">AZIMUTH</td>
<td><input type="text" name="AZIMUTH"/></td>
<td align="right">CONT</td>
<td><input type="text" name="CONT"/></td>
<td align="right">RVAL</td>
<td><input type="text" name="RVAL"/></td>
</tr>
<tr>
<td align="right">SVN</td>
<td><input type="text" name="SVN"/></td>
<td align="right">SLP01</td>
<td><input type="text" name="SLP01"/></td>
<td align="right">MVN</td>
<td><input type="text" name="MVN"/></td>
<td align="right">SLP02</td>
<td><input type="text" name="SLP02"/></td>
<td align="right">DEP</td>
<td><input type="text" name="DEP"/></td>
<td align="right">DEPVOM</td>
<td><input type="text" name="DEPVOM"/></td>
</tr>
<tr>
<td align="right">PVCHAR</td>
<td><input type="text" name="PVCHAR"/></td>
<td align="right">MATL</td>
<td><input type="text" name="MATL"/></td>
<td align="right">VLNRSP</td>
<td><input type="text" name="VLNRSP"/></td>
<td align="right">VLNRVWDT</td>
<td><input type="text" name="VLNRVWDT"/></td>
</tr>
<tr>
<td align="right">RECS</td>
<td><input type="text" name="RECS"/></td>
<td align="right">RVWDT</td>
<td><input type="text" name="RVWDT"/></td>
<td align="right">INFODT</td>
<td><input type="text" name="INFODT"/></td>
<td align="right">CHGDT</td>
<td><input type="text" name="CHGDT"/></td>
</tr>
<tr>
<td align="right">RSP</td>
<td><input type="text" name="RSP"/></td>
</tr>
</table>
<br/>
options<br/><br/>
Add Main <br/><br/>
Delete TPCD TD SCD
</div>
<div id="additionallocation" class="accord">
Additional Location Information
<br/><br/>
<table>
<tr>
<td align="right">OPER</td>
<td><input type="text" name="OPER"/></td>
<td align="right">COND</td>
<td><input type="text" name="COND"/></td>
<td align="right">CONDR</td>
<td><input type="text" name="CONDR"/></td>
<td align="right">ACTY</td>
<td><input type="text" name="ACTY"/></td>
</tr>
<tr>
<td align="right">FNC1</td>
<td><input type="text" name="FNC1"/></td>
<td align="right">FNC2</td>
<td><input type="text" name="FNC2"/></td>
</tr>
<tr>
<td align="right">MSN1</td>
<td><input type="text" name="MSN1"/></td>
<td align="right">MSN2</td>
<td><input type="text" name="MSN2"/></td>
<td align="right">MSN1SP</td>
<td><input type="text" name="MSN1SP"/></td>
</tr>
<tr>
<td align="right">ROLTP</td>
<td><input type="text" name="ROLTP"/></td>
<td align="right">ROLLV</td>
<td><input type="text" name="ROLLV"/></td>
<td align="right">RANK</td>
<td><input type="text" name="RANK"/></td>
<td align="right">IGRP</td>
<td><input type="text" name="IGRP"/></td>
<td align="right">MODCD</td>
<td><input type="text" name="MODCD"/></td>
<td align="right">CRT</td>
<td><input type="text" name="CRT"/></td>
</tr>
<tr>
<td align="right">CAP</td>
<td><input type="text" name="CAP"/></td>
<td align="right">CAPUOM</td>
<td><input type="text" name="CAPUOM"/></td>
<td align="right">CAPE</td>
<td><input type="text" name="CAPE"/></td>
</tr>
<tr>
<td align="right">OUTPUT</td>
<td><input type="text" name="OUTPUT"/></td>
<td align="right">OUTUOM</td>
<td><input type="text" name="OUTUOM"/></td>
</tr>
<tr>
<td align="right">OPSTRCOV</td>
<td><input type="text" name="OPSTRCOV"/></td>
<td align="right">OPSTRUOM</td>
<td><input type="text" name="OPSTRUOM"/></td>
</tr>
<tr>
<td align="right">SPANLENGTH</td>
<td><input type="text" name="SPANLENGTH"/></td>
<td align="right">SPLUOM</td>
<td><input type="text" name="SPLUOM"/></td>
<td align="right">SPAN</td>
<td><input type="text" name="SPAN"/></td>
<td align="right">LINE</td>
<td><input type="text" name="LINE"/></td>
</tr>
<tr>
<td align="right">MAXDEMUSE</td>
<td><input type="text" name="MAXDEMUSE"/></td>
<td align="right">C3SIG</td>
<td><input type="text" name="C3SIG"/></td>
<td align="right">C3CD</td>
<td><input type="text" name="C3CD"/></td>
<td align="right">SRCD</td>
<td><input type="text" name="SRCD"/></td>
</tr>
<tr>
<td align="right">FAC PULLDT</td>
<td><input type="text" name="FACPULLDT"/></td>
</tr>
<tr>
<td align="right">ELT PULLDT</td>
<td><input type="text" name="ELTPULLDT"/></td>
</tr>
<tr>
<td align="right">GEOD PULLDT</td>
<td><input type="text" name="GEOPULLDT"/></td>
</tr>
</table>
</div>
</div>
</body>