PrimeFaces3.2を使用したdataTableに問題があります。
DataTableの内容が、指定されたdivに対して広すぎます。したがって、div/formのコンテンツをスクロール可能にする必要があります。style = "x-overflow:auto / scroll"を使用しても、何も変更されません。
生成されたhtmlは次のようになります。
<div id="content" style="width: 500px;">
<form id="j_id1241625851_2_2315c4de" class="ui-widget ui-widget-content ui-shadow ui-corner-all" style="x-overflow: scroll;" enctype="application/x-www-form-urlencoded" action="/data.xhtml" method="post" name="j_id1241625851_2_2315c4de">
<div id="j_id1241625851_2_2315c4de:serverdata" class="ui-datatable ui-widget">
<table role="grid">
<thead> ...
</thead>
<tfoot>
<tbody id="j_id1241625851_2_2315c4de:serverdata_data" class="ui-datatable-data ui-widget-content">
<tbody id="j_id1241625851_2_2315c4de:serverdata_data" class="ui-datatable-data ui-widget-content">
<tr class="ui-widget-content ui-datatable-even" role="row" data-ri="0">
<td style="width: 200px;" role="gridcell">
<td role="gridcell">
<td role="gridcell">
<td role="gridcell">
<td role="gridcell">
...
</tr>
...
</tbody>
</table>
</div>
</form>
</div>
では、フォームのコンテンツ(データテーブルなど)をスクロール可能にするにはどうすればよいですか?