Laravel pagination active page appears without style

Question

I'm using Laravel pagination with ->render() or ->links() method. Everything it's fine, the only problem is with my current active page, doesn't matter is is the first one, the second one or the last page, if is the active page the style doesn't work properly. Here is an example of my problem.

Searching for a solution to my problem I can see that the selected page number has and "active" class added. Searching on my css files (from coreui free template)

I found the following styles:

.page-item.active .page-link, 
.pagination-datatables li.active .page-link, 
.pagination li.active .page-link, 
.page-item.active .pagination-datatables li a, 
.pagination-datatables li .page-item.active a, 
.pagination-datatables li.active a, 
.page-item.active .pagination li a, 
.pagination li .page-item.active a, 
.pagination li.active a {
    z-index: 2;
    color: #fff;
    background-color: #20a8d8;
    border-color: #20a8d8; 
}

Here is the HTML output my the render() function:

<ul class="pagination">
    <li><a href="http://localhost:8000/productos?page=1" rel="prev">&laquo;</a></li>
    <li><a href="http://localhost:8000/productos?page=1">1</a></li>
    <li class="active"><span>2</span></li>
    <li><a href="http://localhost:8000/productos?page=3">3</a></li>
    <li><a href="http://localhost:8000/productos?page=3" rel="next">&raquo;</a></li>
</ul>

What could be the problem?

I actually meant the HTML output by the `render()` method. The other markup isn't relevant. — fubar, Sep 05 '18 at 22:03
The problem is that the CSS you have posted doesn't actually target the active pagination item - `.pagination li.active span`. — fubar, Sep 05 '18 at 22:18
@fubar Got it, I found the solution and posted it, thanks!!! — User1899289003, Sep 05 '18 at 22:35

score 0 · Accepted Answer · answered Sep 05 '18 at 22:34

Playing with my css file and using @fubar comments I found the solution. What I do was this:

I change this:

.page-item.active .page-link, 
.pagination-datatables li.active .page-link, 
.pagination li.active .page-link, 
.page-item.active .pagination-datatables li a, 
.pagination-datatables li .page-item.active a, 
.pagination-datatables li.active a, 
.page-item.active .pagination li a, 
.pagination li .page-item.active a, 
.pagination li.active a {
    z-index: 2;
   color: #fff;
   background-color: #20a8d8;
   border-color: #20a8d8; 
}

To this:

.page-item.active .page-link, 
.pagination-datatables li.active .page-link, 
.pagination li.active .page-link, 
**.pagination li.active span,** --Added line
.page-item.active .pagination-datatables li a, 
.pagination-datatables li .page-item.active a, 
.pagination-datatables li.active a, 
.page-item.active .pagination li a, 
.pagination li .page-item.active a, 
.pagination li.active a {
    z-index: 2;
   color: #fff;
   background-color: #20a8d8;
   border-color: #20a8d8; 
}

And I added this style:

.page-link, .pagination-datatables li a, .pagination li a, .pagination span {
    position: relative;
    display: block;
    padding: 0.5rem 0.75rem;
    margin-left: -1px;
    line-height: 1.25;
    color: #20a8d8;
    background-color: #fff;
    border: 1px solid #ddd; }

score 0 · Answer 2 · answered Mar 30 '19 at 10:14

I too had the same problem. But I had added my custom CSS to style anchor tags with my own styles. It turns out my CSS was interfering with it so, I commented all my anchor tag styles and it worked!. So, (in my case) solutions is that, don't use tag name to write any styles in your CSS, rather use ID's or Classes for that purpose. To target desired anchor tags in navbar now I am doing this:

#mynav a {
   color: white;
   text-decoration: none;
   font-size: 1.3rem;
   font-weight: bold;
}

This way it does not interfere with any other anchor tag on the page.

Laravel pagination active page appears without style

2 Answers2