Basic Page Layout with div and table for tabs and grid
I have 4 div's on a page. In the third div I want to have tabs and a grid within a table cell. I want the tabs and the grid to move with the div and table as the other divs around it grow, shrink, and hide. I have accomplished that as follows...
<div id="divSomeGrid" style="z-index: 1; display: block; background-color: #CCFF00; width: 100%; overflow: auto;"> <table cellpadding="0" cellspacing="0" width="100%" style="table-layout: fixed;"> <tr> <td width="100%"> <script> document.write(oDisplayTabs); document.write(oDisplayFrame); document.write(oMainGrid); </script> </td> </tr> </table> </div> <!-- END divSomeGrid -->
The objects are defined as follows:
var oDisplayTabs = new AW.UI.Tabs;
var oDisplayFrame = new AW.HTML.DIV;
var oMainGrid = new AW.Grid.Extended;
My problem is this, depending on how I define my styles the tabs either appear at the top of my page, on top of my other div's, or if I remove the position:absolute and get the objects to stay within the table they are lined up (stacked) on the page one below the other (i.e. first the tabs, then the frame, then the grid).
Should I not be using the AW.HTML.DIV? Are there other examples of tabs I can look at? I realize that this might be a very basic question compared to the inner workings of the grid (I haven't even gotten there yet), but some of the basic page layout principles with these controls evades me.
My apologies, and thanks in advance,
<td width="100%" valign="top"> <script> document.write(oCollectionDisplayTabs); </script> <div style="border: 1px solid #91A7B4; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; padding-top: 5px; background-color: #FCFCFE;"> <script> document.write(oMainCoinGrid); </script> </div> </td>
...and it seems to work. I'm not sure how I would have done it with the var oDisplayFrame = new AW.HTML.DIV;.
Anyway, I'm on my way.
This topic is archived.
Back to support forum
Version 2Looking for AW 2.6 ?
The old site is here.