PrimeNG Avalon 6.1.0 Bootstrap v4 data table pagination bug

[wmiles]

The pagination numbers are not aligned when using a pTable with bootstrap 4.

I have linked to 2 separate screenshots of the above-mentioned theme. The first shows a bug while running the application on a development server. You can see the issue is in the application of Bootstrap v.4 to the data table pagination, which causes the pagination pages to not be inline with pagination first, previous, next, or last.

v4 Image Failure

The second screenshot shows the same scenario and environment with the exception that it references Bootstrap v.3. In this application, the pagination is inline as expected.

v3 Image Success

This seems to be an issue with the Avalon theme "out of the box" when using the theme-blue-v4.css and layout-blue-v4.css.

Thank you for your assistance in this matter.

[merve7]

I tried to replicate but unabled. Do you sure updated your theme files and generate again css file with

Code: Select all

sass -w public/assets --sourcemap==none 

command?

[wmiles]

We can see the behavior on the deployed demo as well.
1. Visit: https://www.primefaces.org/avalon-ng/#/data
2. Use Menu on Left to switch to Bootstrap 4.
3. Zoom in to 300% (Easier to see this way)
4. Scroll down to the first pagination on a Table.

[wmiles]

We believe we found a solution.
in _data.scss
...
.ui-paginator-pages {
..
margin: -4px 0px 0px 0px; // changed from margin: 0;
..


We also noticed that the spacing on each number and arrows were not consistent. This makes the last number box be smaller than the others.
To resolve that we removed
margin-left: -4px;

from
.ui-paginator-first
.ui-paginator-prev
.ui-paginator-next
.ui-paginator-last