Arran Mccullough added a comment - 30/Sep/13 10:04 AM Attached test case source code that shows this behavior.

Arturo Zambrano added a comment - 29/Apr/14 3:18 PM This is not a situation particular to the ace:dataTable. This is the way things work in HTML in general. Absolute-positioned items are outside of the normal flow of content, and therefore their position doesn't change when the rest of the content moves. It's not the case that the absolute-positioned item moves with the scrollbar; it's the other contents that moves while the absolute-positioned item stays in the same place. A quick plain-HTML example that demonstrates this fact is the following: <div style= "border:1px #000 solid;width:200px;height:150px;overflow:auto;" > <div style= "position:absolute;color:#f00;" > position absolute </div> <div> default position </div> <div> default position </div> <div> default position </div> <div> default position </div> <div> default position </div> <div> default position </div> <div> default position </div> <div> default position </div> <div> default position </div> <div> default position </div> <div> default position </div> <div> default position </div> <div> default position </div> <div> default position </div> <div> default position </div> <div> default position </div> <div> default position </div> <div> default position </div> <div> default position </div> <div> default position </div> </div> So, this is not an issue that has to be "fixed" necessarily in the component code. A better workaround consists in making the closest parent of the absolute-positioned span have position:relative. Since, the positions of absolute-positioned elements are determined relative to the closest positioned container (absolute or relative), and relative-positioned elements stay in the normal flow of content, by making the closest ancestor relatively positioned, the absolutely positioned span will determine its position relative to this ancestor and not relative to the scrollable container, so when scrolling the table, this ancestor will move with the rest of the content, "carrying" its absolute-positioned child. The CSS to add to the page looks like this: .ui-datatable-scrollable-header table thead tr th div { position:relative; } We could consider adding this CSS to our stylesheets, so that all header cells are relative-positioned. However, it is uncertain whether this change will affect other scenarios or existing applications.

Arturo Zambrano added a comment - 29/Apr/14 6:42 PM Resolving as Won't Fix. Use suggested workarounds.