0

I have a frustrating problem with the following scenario:

  • Right col, with table. Always 100% of available browser width.

  • Smaller Left col (sidebar) with width set to just 140px. Left col has slide-in / slide-out animation, i.e. it can be minimised if not required to maximise available horizontal space for the table in the right col. Right col alters its width correspondingly to use all the space.

  • The page header and the table heading row are fixed at the top of the page using a jquery plugin. I could have used position:fixed but then when the table forces the page to scroll horizontally it all breaks as you cant scroll horizontally with position:fixed. Hence the jquery plugin.

The problem is, the jQuery plugin remembers the original widths on the elements, so when the sidebar is shrunk and the page is scrolled, the fixed elements (header rows and sidebar) return to their original size rather than staying shrunk.

I made a basic example of the problem, with all the elements explained above, on jfiddle. http://jsfiddle.net/cr0wn3r/ktbdx/18/

petesiss
  • 994
  • 13
  • 30
  • Try using this: http://stackoverflow.com/questions/4676131/how-do-i-get-a-fixed-position-div-to-scroll-horizontally-with-the-content-using – Vladimir Kocjancic Sep 22 '11 at 11:51
  • U want the cells not to change their size? – Val Sep 22 '11 at 11:51
  • When the left col is shrunk the right col table should expand to fill the space. That works fine. The problem is when you then scroll the table the thead row and left col forget what widths they are ment to be and revert back to original. – petesiss Sep 22 '11 at 11:59

1 Answers1

0

Instead of using jquery plugin which doesn't include refreshing option you can do the trick by yourself.

HERE there is short and great tutorial how to obtain the position effect you want to have.

avall
  • 2,025
  • 2
  • 16
  • 28
  • Thanks for the link. That tuorial is cool, but it has exactly the same problem. Looks like it isnt the plugin resetting the widths after all, but the browser is using what it thinks it knows about the page to apply the position:fixed and getting it wrong. – petesiss Sep 22 '11 at 13:43
  • Also, its no good using position fixed at all, actually, as it prohibits the sideways scrolling. So once you scroll up and the element becomes fixed, if you then scroll sideways it doesnt move sideways. It just stays in position and obscures the other content. – petesiss Sep 22 '11 at 14:17