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

Post Reply
spadovan
Posts: 138
Joined: 05 Jun 2013, 12:04

12 Nov 2019, 09:04

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
Primefaces 7.0.7, Wildfly 14.0.1, JDK 8

spadovan
Posts: 138
Joined: 05 Jun 2013, 12:04

28 Nov 2019, 15:15

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...
Primefaces 7.0.7, Wildfly 14.0.1, JDK 8

Post Reply

Return to “Ultima - PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest