Attached test case and screen shots of the issue. Note: the icefaces.jar, icefaces-ace.jar, and icefaces-compat.jar need to be added to run the war file.

I have tried many approaches, but none of them completely solves these issues. It seems that the jQuery UI Dialog widget needs a specific width set in order to make the correct calculations when there's a data table. The reason why things work after resizing the dialog and/or closing the dialog is that a width is explicitly set by the Dialog widget after those events. So, all the approaches so far have been oriented towards pre-calculating a width and set it explicitly.

Another workaround I found was simply to add a <h:inputText style="visibility:hidden;"/> component as a sibling of the data table. That way all positions and sizes are calculated correctly the first time for some reason. If the inputText is not a sibling of the table, then it doesn't work.

similar issue: http://jira.icesoft.org/browse/MOBI-908

Committed fix at revision 38664.

As mentioned above, when the jQuery UI Dialog widget is initialized with a specific width, the sizes and positions of the table and the dialog are calculated correctly. This also works when setting a percentage width. So, the solution consists in setting a width of 99% when at least one ace:dataTable is found inside the dialog with no explicit width set (including any of it's ancestor nodes). The data table root node has the class .ui-datatable, which is defined with 'width:100%' in datatable.css. So, ace:dataTables try to use as much width as possible, and therefore setting the dialog width to 99% is a good measure (100% makes the dialog be wider than the viewport, which doesn't look good). When there's no ace:dataTable at all inside the dialog, everything works as before (i.e. setting width:auto; ).

Backported fix to 3.3 EE maintenance branch at revision 38723.