The client has commented on when you scroll the browser to the right beyond the right border of the datatable you will also see the sortable column icons. So they are not being contained by the datatable. See attached screen shot.

This issue is similar in nature to ICE-9515

Further observations:

User is zooming their browser in to 75%, then when scroll not only are the sort arrow buttons not scrolling properly, but the data in the columns are also being over-layed with the vertical column lines of the table, cutting off both the column headers and the data. Even the buttons are scrolling incorrectly.

I tested the ace:datatable attribute 'scrollWidthIE7'. First, removed overflow: auto in the application. I then added scrollable="true" to the datatable and scrollWidthIE7="3200" to test a single specific datatable that was particularly wide. I didn't see any change to the issues specified above.

This can be fixed at the app-level by simply adding "position: relative;" to the same container that has "overflow:auto;".

The root cause of the issue is that IE7 handles differently position:relative;, and the ui-sortable-column-icon CSS class that the sorting buttons have contains this rule. This could be fixed by simply changing this rule to position:absolute; in our style sheets. We could do it just for IE, but there may be many other scenarios where using position:absolute; will have unwanted results. Fixing this at the app level seems to be the easiest way.

Verified situation in the case of scrollable data tables, both on the showcase app and on QA's test app. In both cases, this issue is not present on IE7 (nor in any other browser), even though none of the elements that compose the table have position:relative;. So, it could be due to other factors that this issue is not present. On the showcase, a parent component in the demos has position:relative;, and in the test app this is not the case but nevertheless there are no issues.