Serenity 2.0.0 Scrollable DataTable Headers Misalignment on Chrome

Post Reply
SPMS EPE
Posts: 1
Joined: 23 Jul 2018, 12:07

12 Jun 2019, 17:15

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:
Image.

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:
Image

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!

User avatar
aragorn
Posts: 3609
Joined: 29 Jun 2013, 12:38

14 Jun 2019, 09:59

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
Posts: 5
Joined: 13 Jun 2019, 19:09

14 Jun 2019, 13:45

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

User avatar
aragorn
Posts: 3609
Joined: 29 Jun 2013, 12:38

17 Jun 2019, 10:32

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
Posts: 5
Joined: 13 Jun 2019, 19:09

19 Jun 2019, 13:43

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

User avatar
aragorn
Posts: 3609
Joined: 29 Jun 2013, 12:38

21 Jun 2019, 11:11

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
Posts: 5
Joined: 13 Jun 2019, 19:09

21 Jun 2019, 11:26

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

User avatar
aragorn
Posts: 3609
Joined: 29 Jun 2013, 12:38

24 Jun 2019, 08:56

Hi,

No problem, thanks a lot for the update!

Best Regards,

Post Reply

Return to “Serenity - PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest