Paging boxes are not aligned on Windows

[bjorntj]

https://pasteboard.co/IJOtQqM.png

As you see in the image, the boxes are not aligned properly. This happens on Windows but looks fine when using Linux or Mac.
Is this a known problem?


Regards,

BTJ

[bjorntj]

Isn't there support for this paid product??

[mert.sincan]

Is this a known problem?

- No, I'll check this issue and get back to you.

[mert.sincan]

Fixed for the next version. For now, please use the following css style;

Code: Select all

body .ui-paginator .ui-paginator-pages .ui-paginator-page {
    padding: 7px 12px 6px;
}

Best Regards,

[bjorntj]

Ok, tried that but I still see the same problem?

[mert.sincan]

Interesting! Could you please check the above style in the inspector of browser? If it is available, you can change padding values.

Best Regards,

[bjorntj]

Yes, it's availabe but changing the padding values does not move the box up, only down.

Also, did some more testing. I have a button in the paging row and it seems to be the component guilty of the problem. If I remove the button, it displays ok also in Windows. Adding the button, the layout is not aligned in Windows (but ok on Mac and Linux). Not sure why Windows is different here?

The code looks like this:

Code: Select all

paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}  {AddRecord}" emptyMessage="No records found"


<f:facet name="{AddRecord}">
     <p:commandButton value="Add record" icon="fa fa-plus" action="#{mainController.addRecord}" style="width: 120px; margin-top: 0px; margin-bottom: 0px" />
</f:facet>

[mert.sincan]

Not sure why Windows is different here?

- I really don't know either. This is related to the implementations of browsers according to OS. Because there is no rule to detect OS on CSS.

[mert.sincan]

Could you please try the following style with the above style?

Code: Select all

body .ui-paginator .ui-paginator-pages {
    vertical-align: baseline;
}

[bjorntj]

Together wih the previous css override, it now looks good on Windows too... Thx..