DataTable - sticky header not working correctly

Post Reply
kimg
Posts: 54
Joined: 22 Aug 2013, 17:13

04 Aug 2022, 01:07

I'm using PF 11.0
Payara 5.2022.2
JEE 8
Java 17
Serenity 5.0

If I take the Serenity sample app and add the following to the Customers table in table.xhtml

Code: Select all

stickyHeader="true"  stickyTopAt=".layout-topbar"
so it looks like this:

Code: Select all

<p:dataTable widgetVar="customersDT" var="customer" value="#{dataTableDemoView.customers1}" reflow="true"
                                    selection="#{dataTableDemoView.selectedCustomers}" rowKey="#{customer.id}"
                                    stickyHeader="true"  stickyTopAt=".layout-topbar"
                                    paginator="true" rows="10" paginatorPosition="bottom" rowSelectMode="add">
                            <f:facet name="header">
                                <div c.....

I get a sticky header all right and it sits at the top of the viewport. But when i hover my mouse over the individual header points it becomes transparent and the header text mixes with the content of the data table column below the header text.

I don't think it is correct behavior and it confuses any person looking at it.


it gets event worse if I add the following:

Code: Select all


<p:blockUI block="form" > 
                                Generating reviewer list. Please don't refresh/close this page or navigate away...<br />
                                <p:graphicImage value="/images/ajax-loader.gif"/>
                            </p:blockUI>


some where in the page. If I add it like this:

Code: Select all


<div class="card">
                        <p:blockUI block="form" > 
                                Generating reviewer list. Please don't refresh/close this page or navigate away...<br />
                                <p:graphicImage value="/images/ajax-loader.gif"/>
                            </p:blockUI>
                        <h5>Default</h5>
                        <p>Pagination, sort...

it splits the heading into two. One heading appears as the usual table header but without any functionality like sorting for instance.

And another similar heading appears a few rows down the data table. It has the functionality but it looks stupid... :-)

Is there some patch I can apply to get the correct behavior.

This behavior is seen also in serenity 4 and 3.

Kim
Primefaces 6.2 / Glassfish 5 / Payara 5.182

Post Reply

Return to “Serenity - PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest