In our work interface, there is a not-so-appealing table structure that displays potentially large outputs of queries. I must admit, my experience with web development is quite limited.
The layout looks something like this:
<div class = "view_scroll_outer">
<table class = "scrollTableHeader" ...>
<div class = "view_scroll_inner" ...>
<table ...>
... content here
<table class = "scrollTableFooter" ...>
A) The ScrollTableHeader table holds the columns for the final viewable data table.
B) Inside the inner <div> element is where the rows of the final table (with the data) are located.
For now, I am unable to modify this structure - that will have to wait until next month. However, there are some issues with this setup. While I have addressed several of them, one in particular is causing me frustration.
Imagine if the data is extensive in width (many columns and rows). This configuration presents a problem as the columns fall under the outer <div> element, requiring the horizontal scrollbar to appear on the outer box. Yet, the vertical scrollbar is within the inner container since it contains the data rows. Consequently, users have to scroll all the way right on the outer table just to access the vertical scroll bar in the inner box.
Here's what I've attempted so far:
1) Adjusting the width of the inner div box
document.getElementsByClassName('view_scroll_inner')[0].style.width = (visWidth * 0.99) +'px'; //visWidth represents the visual area width
This only results in cutting off columns beyond the visible area
2) Modifying the width of the outer div box
document.getElementsByClassName('view_scroll_outer')[0].style.width = (visWidth * 0.99) +'px';
This seems to produce a similar outcome.
At this point, aside from completely revamping the design (which I plan to do in a month), the only other potential solution that comes to mind is finding a vertical scrollbar that remains at the right end of what you're viewing, rather than the window's right end. This would enable the scrollbar to track along the right side of the visible box as you scroll horizontally in the outer container.
Does anyone know of any scrollbars designed this way? Or perhaps have suggestions for any alternate solutions?