Pinned Table Column Overlays Horizontal Scrollbar

[AmyStephen]

This is a hackish 'solution' (for lack of a better word) to the pinned column overlaying the scrollbar issue.

The problem seems to be poor handling of white-space:nowrap by browsers.

Both the pinned and primary tables should have rows of the same height, but, when there is overflow in the primary table, its row gets a tiny bit taller. Depending on how many rows are in the table, the net result is a difference in height between the .pinned table (which is slightly shorter) and the data table (which is slightly longer). The net result is that the bottom of .pinned table appears where the scrollbar is displayed for the data table, giving the appearance of overlaying the scroll bar.

From my testing and playing around with this problem, it appears to me that the Zurb CSS is appropriate -- in cases where one would expect it -- there is white-space: nowrap. I believe this is a problem with browsers, hopefully one that will go away as everyone gets more experience with mobile devices.

For now, I'm adding this little act to my CSS to set .pinned to a height of 98%. Even though it does not fix the problem of the row height differences, it does seem to move the bottom of the .pinned table out of the way of the scroll bar.

In my opinion, users are less likely to assume there is an error with the scroll bar displaying properly.

But, it's a hack. I'll deny I recommended it, if asked later. ;-)

I believe this could address the 2nd part of the issue reported here #5

Thanks for sharing this work, it's very helpful.

[AmyStephen]

Before image: http://s9.postimage.org/46tawnrb1/Screen_shot_2012_10_27_at_2_01_10_PM.png

After image: http://s7.postimage.org/6v3kczf15/Screen_shot_2012_10_27_at_2_00_30_PM.png

In case that helps explain the issue better.

Thanks again.