There's a DIV with a fixed height, containing a data table. I can't get the DIV to show overflow-y scrollbars after a page refresh.
Sadly, the developers have also hard-coded some CSS throughout their non-CSS files, but I think I've tracked most of that down and took it out for the most part.
The issue: When the data table contains more rows than the three rows that are visible, and the user clicks, say, row #22, then the page reloads and the clicked row (#22) is not visible. The user will have to scroll down to see what they've clicked.
Not very practical, because this page requires evaluation of the selected row item and therefore the end-user needs to see the details about the selected item.
This is what it looks like before:
Then I've tried some crazy things with offsetHeight, scrollHeight and overflow, and it sort of works — in terms of scrolling the desired table row into view.
The problem is: Now the vertical scrollbar of the DIV container has disappeared. Or sometimes, it shows up, but I can't scroll more than a few pixels, and the top of the table can never be reached.
So this is what it looks like after:
Here is a snippet of my most recent attempt:
objDiv.style.display = "none";
objDiv.style.position = "relative";
objTbl.style.position = "absolute";
objTbl.style.width = "450px";
objTbl.style.height = "100%";
objTbl.style.scrollHeight = (intHt +5) + "px";
objDiv.style.height = "95px";
objDiv.style.scrollHeight = (intHt +5) + "px";
objDiv.style.overflowY = "scroll";
objDiv.style.display = "block";
objTbl.style.top = "-20px";
intHt = the actual height of the data table inside the DIV.
Although I have all the other variables to determine the height of the table rows, the location of the selected row (plus how many rows are above/below it), for now it would just like to figure out what I am doing wrong here.
By the way, the DIV is hard-coded to be 95px high.
<div class="grid_8 alpha" id="evaluation_area_left">
<div id="tableSelector"><!--TABLE GETS INSERTED HERE-->></div>
Any hints or suggestions, anyone?