3

I'm creating a data grid using div's. I need the data in the grid to scroll with the headers in the x direction which works properly in the example. My problem is I want the headers to always remain visible at the top of the grid so I put the grid's data in another div and use it scroll in the Y direction. Because the data rows are wider than the parent div, the Y scroll bar is usually not visible. You have to scroll all the way to right to use the Y scroll bar. Is there any way to keep the scroll bar visible at all times? I've tried different options with css overflow but can't seem to find the right solution.

working example of scroll problem

seaBass
  • 585
  • 1
  • 6
  • 17
  • 1
    I've only seen this solved with JS -- not with pure HTML. As an example, they'd put overflow scroll on the body and overflow: hidden on the header. And whenever the body is scrolled they'd set the margin/offset of the header so the two stay in sync. Anyway, the solution, in my opinion, is to get a good JS grid and use it instead of cooking your own. It's a pain to keep them in sync. – Eli Gassert Jan 21 '13 at 20:30
  • 1
    have you had a look at dataTables? I implemented a dataTables table the other week and had an issue similar to this, there is thankfully a setting in the initialization, or some other setting that gets it working fine. If you're interested the link is http://www.datatables.net/ – lukeocom Jan 22 '13 at 01:44
  • also have a look at,, http://www.rickyh.co.uk/css-position-x-and-position-y/ – lukeocom Jan 22 '13 at 03:03
  • I think it's a usability issue to have to scroll right to see the data. I have this prejudice against horizontal scrollbars. Can you rearrange the layout so that users aren't trying to see lots of data in a tiny little box? – Jen Jan 27 '13 at 06:47

1 Answers1

1

Give this a try, it might work

html {
       overflow-x: scroll;
}
zazvorniki
  • 3,512
  • 21
  • 74
  • 122