DataTable - sticky header not working correctly

Forum rules
Please note that response time for technical support is within 3-5 business days.
kimg
Posts: 61
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

mert.sincan
Posts: 5281
Joined: 29 Jun 2013, 12:38

15 Aug 2022, 00:51

Thanks a lot for your report! Could you please attach a screenshot for us?

Best Regards,

kimg
Posts: 61
Joined: 22 Aug 2013, 17:13

15 Aug 2022, 17:20

Sorry for asking such a stupid question but how do I attach an image in this post?
Primefaces 6.2 / Glassfish 5 / Payara 5.182

mert.sincan
Posts: 5281
Joined: 29 Jun 2013, 12:38

16 Aug 2022, 15:00

No problem, you can add a link(dropbox/google drive/ etc.) to your comment

kimg
Posts: 61
Joined: 22 Aug 2013, 17:13

16 Aug 2022, 17:04

ok...

here they are:

1)

https://drive.google.com/file/d/10oSYuc ... sp=sharing

Here you can see that the menu is sticky but when I hover the mouse over the menu items it becomes transparent and the item below shines through.


2)
https://drive.google.com/file/d/1JICqM- ... sp=sharing

In this case the code for blockui has been inserted into the view.

It causes the menu (when it is not 'sticky') to be shown at the normal position above the data table and again a few lines down the table. The menu above does not have any functionality but the menu below is active.

when you scroll the table so the menu becomes sticky the two menus come together and it works as it should. But the same problem as 1)...the menu items become transparent.

I hope it is clear.

Kim
Primefaces 6.2 / Glassfish 5 / Payara 5.182

mert.sincan
Posts: 5281
Joined: 29 Jun 2013, 12:38

18 Aug 2022, 13:50

Hi,

Thanks a lot for the screenshots!

1) Fixed for the next version
2) I think you see this issue after you pin and unpin the left menu of the layout. If yes, please update the following code block in layout.js;

Code: Select all

 this.anchorButton.off('click.anchorButton').on('click.anchorButton', function(e) {
            $this.wrapper.removeClass('layout-wrapper-static-restore');
            $this.wrapper.toggleClass('layout-wrapper-static');
            setTimeout(function() {
                $(window).trigger('resize');
            }, 100);
            $this.saveMenuState();
            e.preventDefault();
        });
Best Regards,

kimg
Posts: 61
Joined: 22 Aug 2013, 17:13

18 Aug 2022, 16:01

1) I look forward to that.

2) no i didn't solve the problem. I added the code you recommended but the menu is still split in two.

Kim
Primefaces 6.2 / Glassfish 5 / Payara 5.182

mert.sincan
Posts: 5281
Joined: 29 Jun 2013, 12:38

18 Aug 2022, 16:37

2) no i didn't solve the problem. I added the code you recommended but the menu is still split in two.
- Could you please attach a video to replicate this problem?

Best Regards,

kimg
Posts: 61
Joined: 22 Aug 2013, 17:13

18 Aug 2022, 18:11

I'm not doing anything special.
I just use the Serenity demo app in which I entered the code for blockui into the table.xhtml page.

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>

and that's it. Compile and run.
It should be very easy to replicate.
Primefaces 6.2 / Glassfish 5 / Payara 5.182

mert.sincan
Posts: 5281
Joined: 29 Jun 2013, 12:38

20 Aug 2022, 03:01

Thanks a lot for the update! This seems like a PrimeFaces core issue. Could you please try the following CSS code;

Code: Select all

<style>
    #form {
        position: static !important;
    }
</style>
Best Regards,

Post Reply

Return to “Serenity - PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 3 guests