Paging boxes are not aligned on Windows

User avatar
bjorntj
Posts: 236
Joined: 30 Jul 2010, 10:46

05 Dec 2019, 10:05

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
PrimeFaces 8.x | Spring Boot 2.3.x | Undertow | Mojarra 2.3.x
Arch Linux, Firefox and Chromium

User avatar
bjorntj
Posts: 236
Joined: 30 Jul 2010, 10:46

06 Dec 2019, 11:03

Isn't there support for this paid product??
PrimeFaces 8.x | Spring Boot 2.3.x | Undertow | Mojarra 2.3.x
Arch Linux, Firefox and Chromium

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

07 Dec 2019, 23:12

Is this a known problem?
- No, I'll check this issue and get back to you.

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

09 Dec 2019, 08:30

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,

User avatar
bjorntj
Posts: 236
Joined: 30 Jul 2010, 10:46

10 Dec 2019, 10:11

Ok, tried that but I still see the same problem?
PrimeFaces 8.x | Spring Boot 2.3.x | Undertow | Mojarra 2.3.x
Arch Linux, Firefox and Chromium

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

10 Dec 2019, 12:03

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

Best Regards,

User avatar
bjorntj
Posts: 236
Joined: 30 Jul 2010, 10:46

10 Dec 2019, 12:19

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>
PrimeFaces 8.x | Spring Boot 2.3.x | Undertow | Mojarra 2.3.x
Arch Linux, Firefox and Chromium

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

10 Dec 2019, 12:48

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
Posts: 4638
Joined: 29 Jun 2013, 12:38

10 Dec 2019, 12:57

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

Code: Select all

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

User avatar
bjorntj
Posts: 236
Joined: 30 Jul 2010, 10:46

10 Dec 2019, 13:04

Together wih the previous css override, it now looks good on Windows too... Thx.. :)
PrimeFaces 8.x | Spring Boot 2.3.x | Undertow | Mojarra 2.3.x
Arch Linux, Firefox and Chromium

Post Reply

Return to “Mirage - PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest