PrimeNG Avalon 6.1.0 Bootstrap v4 data table pagination bug

Post Reply
Posts: 3
Joined: 21 Jul 2018, 00:00

07 Oct 2018, 13:55

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.

Posts: 465
Joined: 12 Sep 2017, 10:44

09 Oct 2018, 14:07

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 

Posts: 3
Joined: 21 Jul 2018, 00:00

12 Oct 2018, 17:51

We can see the behavior on the deployed demo as well.
1. Visit:
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.


Posts: 3
Joined: 21 Jul 2018, 00:00

12 Oct 2018, 19:54

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;


Post Reply

Return to “Avalon - PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest