PF 7.0.6 - 7.0.9 and ultima layout : column with percentage on scrollable datatable

[spadovan]

With PF from 7.0.6 to 7.0.9 and ultima layout i have a strange behaviour with datatables which i don't have with PF 7.0.5 (and ultima layout)!

If the datatable has attribute scrollable=true and i specify width in percentage in column tag, this width is translated automatically in pixels on the generated html page.

sample source code:

<p:dataTable id="corsi" var="cor" value="#{infoBean.dipendente.corsi}"
resizableColumns="true" scrollable="true" scrollHeight="270">

<p:column width="40%" headerText="#{l.titolo}" style="text-align:left">
<h:outputText value="#{cor.getCorTitolo(localeBean.language)}" />
</p:column>
...

generated html:

...
<th id="form:tabView:corsi:j_idt57" class="ui-state-default ui-resizable-column" role="columnheader" aria-label="Titolo" scope="col"
style="text-align:left;width:40px"><span class="ui-column-title">Titolo</span></th>
...

I'm using Ultima layout versione 2.0.2. (but the problem is in 2.0.1 and 2.0.0 too)

I have to remain on PF 7.0.5 because i strongly use percentage in column width combined with scrollable datatable.
It's not a problem of PF, since if i don't use ultima layout (and use omega instead) everything works fine.

Thanks

PS: I reallized that this line in theme css causes the problem:
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

haw can we resolve it ?




Simone

[spadovan]

I've noticed that the problem is bound to this line in theme.css

* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

which causes some javascript of primefaces behave wrong...

So i've disabled this style on scrollable datatable in order to let it work correctly:

body .ui-datatable.ui-datatable-scrollable .ui-datatable-scrollable-header, body .ui-datatable.ui-datatable-scrollable .ui-datatable-scrollable-footer { -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
body .ui-datatable.ui-datatable-scrollable .ui-datatable-scrollable-header .ui-datatable-data tr.ui-widget-content, body .ui-datatable.ui-datatable-scrollable .ui-datatable-scrollable-footer .ui-datatable-data tr.ui-widget-content { -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
body .ui-datatable.ui-datatable-scrollable .ui-datatable-scrollable-header .ui-datatable-data td, body .ui-datatable.ui-datatable-scrollable .ui-datatable-scrollable-footer .ui-datatable-data td { -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
body .ui-datatable.ui-datatable-scrollable thead tr th { -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
body .ui-datatable.ui-datatable-scrollable tfoot tr td { -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }

Maybe it's not the best way, but i dind't find one better for now...

[mert.sincan]

Fixed for next version.

Code: Select all

body .ui-datatable .ui-datatable-scrollable-header *, 
body .ui-datatable .ui-datatable-scrollable-theadclone * {
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
}

Best Regards,