Mon. - Fri. 9 am - 5 pm Ask a Question
Remember me

Broken Joomla 4 Article Pagination

1 week 18 hours ago #1

  • Cube's Avatar
  • Cube
  • Posts: 185
Hi. After upgrading to Joomla 4, I got this issue on Pagination on the the Blog layout.
Attachments:

1 week 18 hours ago #2

  • Vyacheslav's Avatar
  • Vyacheslav
  • Posts: 18982
Hello,
Thank you for contacting us

Send us a link to page with problem.

Regards,
Vyacheslav, Balbooa.com

1 week 18 hours ago #3

  • Cube's Avatar
  • Cube
  • Posts: 185
The issue can be found here:

1 week 18 hours ago #4

  • Vyacheslav's Avatar
  • Vyacheslav
  • Posts: 18982
You need to add CSS code at the code editor
ul.pagination {
    display: flex;
    padding-left: 0;
    list-style: none;
}

.page-item.disabled .page-link {
    color: #6d757e;
    pointer-events: none;
    background-color: #fff;
    border-color: #dfe3e7;
}

.page-item:first-child .page-link {
    border-top-left-radius: .25rem;
    border-bottom-left-radius: .25rem;
}

.page-item.active .page-link {
    z-index: 3;
    color: #fff;
    background-color: var(--primary);
    border-color: var(--primary);
}

.page-link {
    padding: .375rem .75rem;
}

.page-link {
    position: relative;
    display: block;
    text-decoration: none;
    background-color: #fff;
    border: 1px solid #dfe3e7;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.page-item .page-link [class^=icon-] {
    display: inline-block !important;
    font-family: Font Awesome\ 5 Free;
    font-weight: 900;
}

.page-item .icon-angle-left:before {
    content: "\f104";
}

.page-item .icon-angle-double-left:before {
    content: "\f100";
}

.page-item .icon-angle-right:before {
	content: "\f105";
}

.page-item .icon-angle-double-right:before {
	content: "\f101";
}

.page-link:focus, .page-link:hover {
    background-color: #eaedf0;
}

.page-link:hover {
    z-index: 2;
    border-color: #dfe3e7;
}

Best Regards,
Vyacheslav, Balbooa Support Team

1 week 17 hours ago #5

  • Cube's Avatar
  • Cube
  • Posts: 185
Thanks, Vyacheslav!

One thing I also noticed, the Category Blog layout (on the same link) it set to 2 columns. Now, it's just single column.

1 week 16 hours ago #6

  • Vyacheslav's Avatar
  • Vyacheslav
  • Posts: 18982
You need to add CSS code:
.com-content-category-blog__items.blog-items.columns-2{
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
        column-gap: 1em;
}

Regards,
Vyacheslav, Balbooa.com

1 week 16 hours ago #7

  • Cube's Avatar
  • Cube
  • Posts: 185
As always. Awesome!
Thanks, Vyacheslav.

1 week 16 hours ago #8

  • Vyacheslav's Avatar
  • Vyacheslav
  • Posts: 18982
You are welcome ;)
Powered by Kunena Forum