DataTable 100% Width Issue

[toreador923]

Hi there,

I am using PrimeFaces 2.1 at the moment and would like to upgrade to 2.2. However, I don't understand why a 100% width is used on the data table component by default in 2.2.RC1 as opposed to the automatic width default in 2.1.

The CSS for datatable.css?ln=primefaces shows me the following:

.ui-datatable table {
border-collapse:collapse;
width:100%;
}

In 2.2.RC1, even tables with one column are stretched all the way across the screen. Why??? I really like how much more responsive 2.2.RC1 data tables are than 2.1 but a width default of 100% with no way of specifying an automatic width is a real problem.

- Pasha Minallah

[Chris55]

Pasha,

To protect your datatable dimension from such effects, wrap the datatable in a DIV tag or override default class stylings (i.e. .ui-datatable). For example:

Code: Select all

<div style="width:960px">
    <p:dataTable ... />
</div>

This will help buffer changes in default values which I also experienced in a minor release upgrade. Hope this helps.

[cagatay.civici]

You can use width:auto to override default PrimeFaces structural css.

[toreador923]

Hi Chris and Optiumus,

Thank you for your suggestions. I did see that overriding the default CSS class stylings on .ui-datatable got the table back to auto width but the paginators were still left stretched all the way. Any ideas on syncing paginator width with the table width? Now, what I would not like to do is to define a specific width on a parent which encloses both these components because the width should be automatic and should be dictated by the data table.

Also, my original question remains: As far as a design decision is concerned, why use a 100% width as the default? In my opinion, 2.1 had this right.

- Pasha Minallah

[cagatay.civici]

It has been sometime since I've add 100% width so can't remember the exact reason, 2.2's datatable is a complete rewrite by the way, 2.1 is based on YUI datatable. I think 100% is needed to sync headers and paginators width with table as headers/paginators are divs that are block elements taking all the width they can, tables don't do this unless width is 100%.

My suggestion would be to use style and styleClass options of datatable, they apply to outer container syncing everything once.

[toreador923]

From a design perspective, I would say that if h:dataTable doesn't stretch the table width to a 100%, neither should p:dataTable or the data table component of any other framework because it would be too obtrusive a change. Syncing widths of the pagniator and data table should be the responsibility of the framework, which now I feel has been shifted over to the user. So, I must go back and enclose each data table within some block component and specify a width on the parent. This is a lot of work for negative results because I didn't want to specify a width in the first place; I wanted it to be automatic. These are just my opinions. I appreciate the great work you guys have done with PrimeFaces, and thank you for all your suggestions in helping me solve this problem. I'll take care of it.

- Pasha Minallah