Adding before scroll and after scroll screenshot.

This is a bug in the ice:panelDivider with IE 7 (and possibly 6) and any positioned contents, when scrolling.
I've added a style tag to screen1.xhtml that adds position:relative to the top half of the divider and fixes the problem.

Adding the IE specific zoom:1; CSS attribute would also work long term and avoid any side effects position:relative might have. The issue is with an internal property of IE, 'hasLayout' and both CSS attribute serve to enable it.

I have committed a fix to the POC that is app specific for now, but the panelDivider component will also be updated shortly.

This issue is not panelDivider specific, when the ice:panelDivider is removed, I still see both problems outlined in ICE-7247.

Two IE7 styling issues are currently reproducible in the Williams poc:

1 - Header text is not moving with the dataTable. In the poc, when you expand the panel at the top, the datatable moves down but the header text does not.

2 - If you change the ace:dataTable in screen2.xhtml to the following, you will see the header columns bleed outside the width of the scrollbar and the column headers overlap the scrollbar :

<ace:dataTable rendered="#

"
value="#

"
var="tableItem"
style="width:900px; overflow:auto;">
<ace:columnGroup type="header">
<ace:column headerText="Williams">Williams</ace:column>
<ace:column headerText="Williams">Williams</ace:column>
<ace:column headerText="Williams">Williams</ace:column>
<ace:column headerText="Williams">Williams</ace:column>
<ace:column headerText="Williams">Williams</ace:column>
<ace:column headerText="Williams">Williams</ace:column>
<ace:column headerText="Williams">Williams</ace:column>
<ace:column headerText="Williams">Williams</ace:column>
<ace:column headerText="Williams">Williams</ace:column>
<ace:column headerText="Williams">Williams</ace:column>
<ace:column headerText="Williams">Williams</ace:column>
<ace:column headerText="Williams">Williams</ace:column>
<ace:column headerText="Williams">Williams</ace:column>
<ace:column headerText="Williams">Williams</ace:column>
<ace:column headerText="Williams">Williams</ace:column>
<ace:column headerText="Williams">Williams</ace:column>
<ace:column headerText="Williams">Williams</ace:column>
<ace:column headerText="Williams">Williams</ace:column>
<ace:column headerText="Williams">Williams</ace:column>
<ace:column headerText="Williams">Williams</ace:column>
</ace:columnGroup>
</ace:dataTable>

As per Ken's suggestions on Skype, I have surrounded the ace:datatable with a div with overflow:auto; and zoom:1; this did not fix either of the two problems.

I tried adding overflow:auto; zoom:1; to the style attribute of ace:datatable and it is not fixing the issue.

This is a problem with every scrollable container for any ace:dataTable in IE7. Zoom must be applied to the container with the scrollbar- not simply wrapping it. No change to the table would fix the issue other than complete header redesign, without using positioning, which has been necessary to enable many of the layouts requested.

The issue must be fixed at this point by correct styling of the scrollable container.

Adding the recommended fix to the issue:

The fix is the same everywhere. Find some notable attribute of the element with the scrollbar- horizontal or vertical, and use that, or give it an ID and write an in page css rule that adds zoom:1. If the zoom 1 is placed correctly, all of the header + scrolling rendering issues are corrected.

If you knew where the tables were going to be scrolled you could add a more general rule to a app-wide css doc.

It turns out after more testing that zoom:1 is not sufficient to fix this bug, though it does change the behavior.

The proper fix is to add position:relative to the container. In the case of screen2.xhtml to the div .screen2DataTable.

For every app that seeks to be IE7 compat, if the table is designed to overgrow its parent, that parent should have position relative set.

Ex.
<style type="text/css">
.screen2DataTable

</style>
<ace:container styleClass="screen2DataTable" ...

or more intelligently styling by adding a "scrollable fix rule" to some global css file and ...

.ie7OverflowFix

<ace:container styleClass="ie7OverflowFix" style="overflow:auto; width:x; height:x;">
<ace:datatable ...

Need to document this technique in the Wiki.