I have a very similar setup in a webpage I'm working on... A flipping great
big tree on the left and PDFs on the right. I tried several different
methods of doing what you want, and ended up with two workable solutions.
Easiest is to use two frames. One on the left for the datagrid, one on the
right for the content. The only problem with this setup is that your
datagrid and details are on two different pages.
Hardest is to use a table with two cells, left and right. In the left cell
where your datagrid goes, you have to put a <div/> element with overflow set
to auto. You then have to create javascript functions that handle the
browser window's onResize and onLoad events that sizes the div to a specific
size. You cannot use percentages for the scroll div size, otherwise the
scroll div will just expand the table. Here's the javascript functions I use
to control size (you may have to change them slightly for your application):
// helper that gets an element by name
function getElement(elem entName){return document.all ?
document.all[elementName] : document.getEle mentById(elemen tName);}
// scales the table cell holding my navigation treeview
// the webpage has a header (div id=outerdiv), then a controls table below
(table id=icantdothisw ithcss), then a table with the treeview on the left in
a cell (td id=navCell) with a div (id = scrollDiv style="overflow :auto;") and
the contents in a cell on the right. The table is width:100% height:100%,
and the navCell width=30%
function scaleNav(){var div, header, controls;div =
getElement('scr ollDiv');navcel l = getElement('nav Cell');header =
getElement('out erDiv');control s = getElement('ica ntdothiswithcss ');if (div
&& header && controls && navcell){div.st yle.height = getWindowHeight () -
header.offsetHe ight - controls.offset Height - 8;div.style.wid th =
navcell.offsetW idth;}}
"UJ" wrote:
I have a long list of items that the user will be able to select from. When
they select an item, I'd like to have more detailed information appear on
the right side of the screen. I've already got a datagrid set up with the
clicking working correctly. Problem is, I'd like to have the list be
scrollable but leave the info on the right alone. What can I put around the
datagrid so that the entire thing becomes scrollable?
TIA - Jeff.
