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(elementName){return document.all ?
document.all[elementName] : document.getElementById(elementName);}
// scales the table cell holding my navigation treeview
// the webpage has a header (div id=outerdiv), then a controls table below
(table id=icantdothiswithcss), 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('scrollDiv');navcell = getElement('navCell');header =
getElement('outerDiv');controls = getElement('icantdothiswithcss');if (div
&& header && controls && navcell){div.style.height = getWindowHeight() -
header.offsetHeight - controls.offsetHeight - 8;div.style.width =
navcell.offsetWidth;}}
"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.
