Serenity 2.0.0 Scrollable DataTable Headers Misalignment on Chrome

[SPMS EPE]

Hello all,

Using Serenity 2.0.0 (PrimeFaces 7.0), the scrollable dataTables' headers reserve the scrollbar space even when there isn't a scrollbar (too few records). See screenshot:
.

As far as I can tell, it works well in other browsers.
Curiously, when the Serenity sidebar is anchored, the headers align with the columns.

To recreate this behaviour, just make a scrollable dataTable with too few records for there to be a scrollbar in Serenity demo project.
For example, I changed the dataTable in "serenity-2.0.0\tag\src\main\webapp\data.xhtml" to:

Code: Select all

<p:dataTable var="car" value="#{dtSelectionView.cars1}" selectionMode="single" reflow="true"
    selection="#{dtSelectionView.selectedCar}" rowKey="#{car.id}" scrollable="true" scrollHeight="400">

I have done exactly the same in Serenity 1.0.4 demo project (PF 6.2) and the table is rendered correctly, with the exception that it is reserving too much empty space below the table. See screenshot:


I've searched the foruns but without luck:
viewtopic.php?t=35671
viewtopic.php?f=3&t=13509
https://code.google.com/archive/p/prime ... ssues/6993

Any help is much appreciated!
Thank you!

[mert.sincan]

Hi,

I couldn't replicate it. Could you please try it after removing the extensions from chrome?

My test code;

Code: Select all

<ui:composition xmlns="http://www.w3.org/1999/xhtml" 
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core" 
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui" 
    template="/WEB-INF/template.xhtml">

    <ui:define name="breadcrumb">
        <li>
            <p:link outcome="/empty">Empty</p:link>
        </li>
    </ui:define>

    <ui:define name="content">
        <div class="ui-g">
            <div class="ui-g-12">
                <div class="card">
                    <p:dataTable var="car" value="#{dtSelectionView.cars1}" selectionMode="single" reflow="true"
                        selection="#{dtSelectionView.selectedCar}" rowKey="#{car.id}" scrollable="true"
                        scrollHeight="400">
                        <f:facet name="header">
                            Single with Row Click
                        </f:facet>
                        <p:column headerText="Id" sortBy="#{car.id}">
                            <h:outputText value="#{car.id}" />
                        </p:column>

                        <p:column headerText="Year" sortBy="#{car.year}">
                            <h:outputText value="#{car.year}" />
                        </p:column>

                        <p:column headerText="Brand" sortBy="#{car.brand}">
                            <h:outputText value="#{car.brand}" />
                        </p:column>

                        <p:column headerText="Color" sortBy="#{car.color}">
                            <h:outputText value="#{car.color}" />
                        </p:column>
                    </p:dataTable>
                </div>
            </div>
        </div>
    </ui:define>

</ui:composition>

Best Regards,

[bruno.silva]

Hi, Aragorn,
Thank you for replying!
(I'm the one who posted the the question but I'm on my personal account this time).

I have removed all the extensions from chrome, updated it, cleaned the cache and cookies;
Restarted fresh from the Zips of the demo projects of Serenity 1.0.4 and 2.0.0 and pasted your test code into the empty page;
Compiled the SASS code to CSS and launched it in Jetty; and the problem persists...

Code: Select all

sass --update src/main/webapp/resources/:src/main/webapp/resources/ --no-source-map
mvn jetty:run

This was also tested in a colleague's machine and, at fist it looked ok (he has a much bigger display) but once he zoomed in to 125% and refreshed the page, the misalignment appeared.

Best regards,
Bruno

[mert.sincan]

Hi Bruno,

Thanks a lot for the update! Most of our component are not compatible with zoom property of the browser. Therefore, I recommend using the browser with the default zoom value.

Also, do you get an error on console? Or could you try it without Serenity?

Best Regards,

[bruno.silva]

Hi, Aragorn,
Sorry for the late reply and thank you for yours!

There is no error on the console.

I think the glitch is zoom/scale related and PrimeFaces related (happens with PF 7.0 and not PF 6.2); not Serenity related.
Serenity's 2.0.0 demo project does not have this issue if I change PF version to 6.2.
I have a custom scaling factor (125%) set in my display and after removing it things look fine with Chrome's zoom set to 100%.
I've tested with several zoom levels in Chrome and, surprisingly, with PF 6.2 the data table is properly rendered regardless of zoom; with PF 7.0 there are some zoom levels at which the data table header wrongly includes the space for the scrolling bar.

On a side note, I've noticed that with the sidebar anchored, (for the same table) the table contracts with PF 6.2 and generates an horizontal scroll bar in PF 7.0.

Hope this helps somehow,

Best regards,
Bruno

[mert.sincan]

Thanks a lot for the update!

Firstly, our components don't support zoom feature of the browser on PF1.x, 6.x, 7.x etc.

On a side note, I've noticed that with the sidebar anchored, (for the same table) the table contracts with PF 6.2 and generates an horizontal scroll bar in PF 7.0.

Could you please try it without Serenity?

Best Regards,

[bruno.silva]

Hi Aragorn,

I'm sorry but in the meanwhile I've been temporarily moved to another project and I don't have time for further tests.
Thank you again for your help!

Best regards,
Bruno

[mert.sincan]

Hi,

No problem, thanks a lot for the update!

Best Regards,