1

I'm working with a Laravel system, and i'm using the Paginator. This functionality works perfectly, but in front-end, happens a conflit that i don't know how to fix it. When i resize to mobile phone mode (toggle device toolbar), the pagination exceed the table that i create. Like the image below.

front-end-paginator

I tried centering this pagination together in the table. I put a simple example of my code in bootply, but I only have a button to simulate the pagination. In Laravel, I use this code to create pagination.

    <nav class="nav justify-content-center">
        <ul class="pagination p-4 justify-content-center" >
            <li>
                {{ $prospect->appends($data)->links() }}
            </li>
        </ul>                    
    </nav>

Can anyone help me fix this? Possibly adjusting the pagination with table and use the bootstrap 4 turning into responsive mode? What causes this problem?

Vendetta
  • 2,078
  • 3
  • 13
  • 31
Arthur Abitante
  • 139
  • 8

1 Answers1

1

You can use onEachSide() to limit the rendering.

$prosect->appends($data)->onEachSide(3)->links();
Darryl E. Clarke
  • 7,537
  • 3
  • 26
  • 34
  • It's a way that i try in first time. I use the "1" value in onEachSide(), but when i put the iphone 5s mode, still persist in this problem, and in a mystery that I didn't understand how, i put the 0.5 and works, but still exceed a bit. I'm trying to fix it with bootstrap 4 because my colleague believe that it's the better way. But you help me a lot, THANKS!!! – Arthur Abitante Oct 04 '19 at 18:33
  • The other option is a custom paginator view. https://stackoverflow.com/questions/28240777/custom-pagination-view-in-laravel-5 – Darryl E. Clarke Oct 04 '19 at 19:08