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.
PrimeNG Avalon 6.1.0 Bootstrap v4 data table pagination bug
Forum rules
Please note that response time for technical support is within 3-5 business days.
Please note that response time for technical support is within 3-5 business days.
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
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.
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.
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
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
-
- Information
-
Who is online
Users browsing this forum: No registered users and 6 guests