p:dataTable 'shrink to fit' scrolling

[healeyb]

I've not managed to get scrollable datatables to reliably respect the
limitations of the width of the containing div (as of PF2.2) and have been
experimenting with the standard CSS 'overflow: auto' mechanism.

Before trying out overflow I hit a problem where tables would always
expand to take up all the available width - this effectively being the
width of the first outer div with a specific width. Given that html like
this is generated by p:dataTable:

Code: Select all

<div class="ui-datatable ui-widget">
  <table>

it was obvious that the problem was that the width on the <table>
element generated by p:dataTable is set to 100%. The main point of my
post is to question whether this is the best default value when
table-layout is auto? (which it is). This value can be overridden with
the following CSS, which allows the datatable to figure out it's own
width:

Code: Select all

.ui-datatable.ui-widget {
    width: auto !important; /* won't work without !important */
}

My requirement is to apply the browser scrollbar technique across all
PF datatables so I added this CSS to set the overflow setting on the
outer div:

Code: Select all

.ui-datatable.ui-widget {
    overflow: auto;
}

- the problem then became that the outer div generated by p:dataTable
inherits the size of the outer container rather than the table within it. This
means that you can have a small datatable on the left side of the window
and a scrollbar way over on the right hand side, with a big gap between.

After some googling I found that there's something called either shrink to
fit or shrink-wrap that causes the outer div to size to the content. Turns
out that everyone has a different idea on how to achieve this effect but I
managed to get it working with just the following addition to the earlier
CSS snippet (tested on IE8 & Chrome):

Code: Select all

.ui-datatable.ui-widget {
    width: auto !important;
    overflow: auto;
    display: inline-block;
}

I did wonder if 'display: inline-block' would be a useful default, it seems
to simply mean generate a block element laid out as if it were inline,
don't know if there are any side effects to take into consideration (probably).

With these changes I've got scrollable datatables that don't span the entire
page, worth noting that you have to use p:dataTable style="height: ..."
rather than height= for the vertical scrollbar. One problem that can't be
oversome using this method is that the table header scrolls out of view
on vertical scroll.

Regards,
Brendan.